代码之家 › 专栏 › 技术社区 › Panama Jack

在jquery-ajax响应后重新绑定动态创建的表单

jquery-selectors jquery php

Panama Jack · 技术社区 · 15 年前

我对jquery有点陌生,但在很大程度上理解它。我的问题是,当刷新整个DIV的Ajax调用完成时,所有动态创建的表单都不起作用。如果您尝试提交它们,那么事件将无法正常工作,只会尝试进行正常的表单提交。我还有其他所有的项目,比如使用.live()绑定的链接,这些项目似乎很有用。只是形式的死亡。如何在Ajax调用后重新绑定动态创建的表单?他们都有formname_id的id。我尝试使用bind,但它不能像下面那样工作。感谢您的帮助。

这是密码

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;
    });
});

});

3 回复 | 直到 15 年前

PetersenDidIt 15 年前

尝试这样做:

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;
});

无需循环窗体以绑定到它们。如果你能用的话 delegate 与其活着,不如这样做。

Gutzofter 15 年前

为什么你不骑过正常的形式提交:

    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

Panama Jack 15 年前

我之所以这样做是为了在函数调用中添加事件并使用event.preventDefault();但当然只有在ff中。在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仍在尝试总结这一行动。阿格……我做错什么了??