Javascript jquery点击事件递归

我正在尝试添加新行，并在选择前一行时绑定单击事件。问题是，这会创建一个递归逻辑，因为click函数本身是绑定的。因此，目前第一次更新的工作方式是单击绑定，而不是下面的新行。这是密码

$('.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);

                    });

                });

$（'.new'）。单击（函数（）
{
var newrow=”“+this.id.split（“”“）[1]+“”“+”新字符串（parseInt（this.id.split（“”“）[2]）+1+”；
var Parent=document.getElementById（'tablediv'）；
var NewDiv=document.createElement（“DIV”）；
NewDiv.innerHTML=newrow；
父.子（NewDiv）；
$（'.new'）。单击（函数（）
{
var newrow=”“+this.id.split（“”“）[1]+“”“+”新字符串（parseInt（this.id.split（“”“）[2]）+1+”；
var Parent=document.getElementById（'tablediv'）；
var NewDiv=document.createElement（“DIV”）；
NewDiv.innerHTML=newrow；
父.子（NewDiv）；
});
});

---

如何创建它，以便单击事件创建新行，并将相同的函数单击事件添加到新行。谢谢

改用。它自动绑定到新创建的元素，因此您不需要递归。

对于jquery>=1.7和早期版本，您可以使用事件委派

$(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);

});

---

也可以考虑使用数据绑定和克隆元素，而不是使用String级联并在点击事件中动态创建HTML。

您可能需要考虑使用像jQuery的代码>克隆< /代码>代替大量的HTML字符串。谢谢解决方案和底层解释！

$(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());

    }