Пересвязать dymanically созданные формы после ответа jQuery ajax

Question

Я немного новичок в jQuery, но понимаю по большей части. Моя проблема в том, что когда мой ajax-вызов, который обновляет весь div, сделан, все мои динамически созданные формы не работают. Если вы попытаетесь отправить их, событие не будет работать должным образом, а просто попытается выполнить обычную отправку формы. У меня есть все другие элементы, такие как ссылки, связанные с использованием .live (), которые, кажется, работают отлично. Просто форма умирает. Как перепривязать динамически созданные формы после вызова ajax? Все они имеют идентификатор formname_id. Я пытался использовать связывание, но оно не работает, как показано ниже. Любая помощь приветствуется.

Вот код

jQuery(document).ready(function(){   
jQuery("form[id^='commentform_']").each(function(){

    var id = parseInt(this.id.replace("commentform_", ""));         

    jQuery(this).bind('submit', function(e) {

        var action     = jQuery('#action_' + id).attr('value');
        var act_id    = ('1');  
            jQuery.ajax({
            type: "POST",
            url: "ajax/modify.php",
            data: "action="+ action +"& act_id="+ act_id,
            success: function(response){                
             jQuery('#CommentsContainer_' + id).html(response);
             jQuery('#commentform_' + id)[0].reset();
            }           
        });      
    return false;
    });
});             

});

Answer 1

Попробуйте сделать что-то вроде этого:

jQuery("form[id^='commentform_']").live('submit',function(){
    var id = parseInt(this.id.replace("commentform_", ""));
    var action = jQuery('#action_' + id).attr('value');
    var act_id = ('1');  
    jQuery.ajax({
        type: "POST",
        url: "ajax/modify.php",
        data: {"action": action, "act_id": act_id},
        success: function(response){                
            jQuery('#CommentsContainer_' + id).html(response);
            jQuery('#commentform_' + id)[0].reset();
        }           
    });      
    return false;
});

Нет необходимости перебирать формы, чтобы связываться с ними. Если вы можете использовать делегат вместо живого, сделайте это.

Answer 2

Я получил это, чтобы работать, добавляя событие в вызов функции и используя event.preventDefault (); НО конечно только в ФФ. Не работает в IE7 ..

jQuery("form[id^='commentform_']").live('submit',function(event){ 
var id = parseInt(this.id.replace("commentform_", "")); 
var action = jQuery('#action_' + id).attr('value'); 
var act_id = ('1');   
jQuery.ajax({ 
    type: "POST", 
    url: "ajax/modify.php", 
    data: {"action": action, "act_id": act_id}, 
    success: function(response){                 
        jQuery('#CommentsContainer_' + id).html(response); 
        jQuery('#commentform_' + id)[0].reset(); 
    }            
});       
event.preventDefault();});

Но IE7 все еще пытается выполнить действие. arrgggh .. Что-то я делаю не так ??

Answer 3

Почему бы вам не отказаться от обычной формы отправки:

    function addNewitem() {
        $('#new_item_form').submit(function() {
            $.get("includes/ItemEdit.php", {
                newItem: true
            },
            function(msg) {
                isNewItem = true;
                $("#new_item").hide();
                $('#item_list').hide();
                $("#item_edit").html( msg );
                $("#item_edit").show();
                editActiveEvent();
            });
            return false;
        });

    }

Не забудьте вернуть false. или сделать .preventDefault