jquery点击事件递归

Question

我正在尝试添加新行并在选择前一行时绑定单击事件。问题在于，这会创建一个递归逻辑，因为单击函数本身是绑定的。因此，目前第一个更新适用于点击绑定，但不适用于以下新行。这是代码

$('.new').click(function ()
                {
                   var newrow =" <div class='controls controls-row'><div id='div_id_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span1 m-wrap input-icon' >"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"</div><div id='div_rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span5 m-wrap input-icon' ><input type='text' onchange='updateRecord(this)' id='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' name='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"'  class='m-wrap span11 new' value=''/></div></div>";
                    var Parent = document.getElementById('tablediv');
                    var NewDiv = document.createElement("DIV");
                    NewDiv.innerHTML = newrow;
                    Parent.appendChild(NewDiv);
                    $('.new').click(function ()
                    {
                        var newrow =" <div class='controls controls-row'><div id='div_id_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span1 m-wrap input-icon' >"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"</div><div id='div_rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span5 m-wrap input-icon' ><input type='text' onchange='updateRecord(this)' id='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' name='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"'  class='m-wrap span11 new' value=''/></div></div>";
                        var Parent = document.getElementById('tablediv');
                        var NewDiv = document.createElement("DIV");
                        NewDiv.innerHTML = newrow;
                        Parent.appendChild(NewDiv);

                    });

                });

如何创建它以便单击事件创建一个新行并将相同的功能单击事件添加到新行。谢谢

Answer 1

您可以使用on()（对于 jquery >=1.7）和live()（对于早期版本）来使用事件委托。

$(document).on('click', '.new', function (){

var newrow =" <div class='controls controls-row'><div id='div_id_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span1 m-wrap input-icon' >"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"</div><div id='div_rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span5 m-wrap input-icon' ><input type='text' onchange='updateRecord(this)' id='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' name='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"'  class='m-wrap span11 new' value=''/></div></div>";
                var Parent = document.getElementById('tablediv');
                var NewDiv = document.createElement("DIV");
                NewDiv.innerHTML = newrow;
                Parent.appendChild(NewDiv);

});

而不是document将事件绑定到在任何给定时间点存在于 DOM 中的另一个父容器。这利用了事件冒泡，实际上您将事件绑定到父元素或文档头，就像在我的示例中一样，当您单击与选择器及其父级匹配的元素时，事件冒泡到事件绑定的位置并触发该元素上的事件

通过将事件与通用选择器内部绑定的方式，.new每次单击时，它都会将 click 事件再次绑定到现有的 .new 元素，因此最终会多次执行事件。

您也可以这样做：

$(function(){
        $('.new').click(handleClick);
    });

    function handleClick(){
                       var newrow =" <div class='controls controls-row'><div id='div_id_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span1 m-wrap input-icon' >"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"</div><div id='div_rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span5 m-wrap input-icon' ><input type='text' onchange='updateRecord(this)' id='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' name='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"'  class='m-wrap span11 new' value=''/></div></div>";
                        var Parent = document.getElementById('tablediv');
                        var NewDiv = document.createElement("DIV");
                        NewDiv.innerHTML = newrow;
                        $(Parent).append($(NewDiv).find('.new').click(handleClick).end());

    }

您还可以考虑使用模板来绑定数据并克隆元素，而不是使用字符串连接并在单击事件中动态创建 html。