2

前の行が選択されているときに、新しい行を追加してクリックイベントをバインドしようとしています。問題は、クリック関数自体がバインドされているため、再帰的なロジックが作成されることです。そのため、現在、最初の更新はクリック バインドに関して機能しますが、次の新しい行は機能しません。コードはこちら

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

                    });

                });

クリック イベントが新しい行を作成し、同じ関数のクリック イベントを新しい行に追加するように作成するにはどうすればよいですか。ありがとう

4

2 に答える 2

4

代わりに.on()を使用してください。新しく作成された要素に自動バインドされるため、再帰は必要ありません。

于 2013-09-19T19:56:59.510 に答える
4

jquery >=1.7では on()を使用し、以前のバージョンでは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バインドする方法では、クリックするたびにクリック イベントが既存の .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 を作成する代わりに、テンプレートを使用してデータをバインドし、要素を複製することを検討することもできます。

于 2013-09-19T19:57:16.577 に答える