jquery click event recursion

Question

Я пытаюсь добавить новую строку и связать событие click, когда выбрана строка before. Проблема в том, что это создает рекурсивную логику, поскольку функция click привязана сама по себе. Итак, в настоящее время первое обновление работает с точки зрения привязки кликов, но не для следующих новых строк. Heres код

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

        }); 

       }); 

Как создать его так, что событие щелчка создает новую строку и добавляет то же событие функции щелчка на новую строку. Thanks

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 в любой данный момент времени. Это использует event bubbling, и на самом деле вы привязываете событие к родительскому элементу или заголовку документа, как в моем примере, когда вы нажимаете на элемент, который он соответствует селектору и его родительскому элементу, когда событие пузырится до того места, где связано событие, и триггеры событие на этом элементе

с тем, как вы обязывающего события внутри с родовым селектором .new будет связывать событие щелчка снова на существующих .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()); 

    } 

Также вы можете рассмотреть возможность использования templating для связывания данных и клонировать элемент вместо того, чтобы использовать конкатенацию и создания HTML динамически в случае щелчка.

Answer 2

использовать .on() вместо. Он автоматически привязывается к вновь созданным элементам, поэтому вам не нужна рекурсия.