0

動的に作成された行を持つテーブルがあります。各行には、その行を削除するためにクリックするリンク ボタンがあります。これがクリック機能です。

$(".deleteButton").on('click', function(){
    console.log("Delete Hit");
    var successful = deleteEntry($(this).attr('id'));
    if(successful == true){
        $(this).parent().parent().remove();
    }else{
        alert("Delete Unsuccessful.");
    }
});

一部のボタンは、ページが最初に読み込まれるときに 1 つの機能で作成されます。それらは機能しますが、この他の関数は、イベントが発生するための適切なクラスを持つボタンを作成するようです。このようなリンクを作成します。

<a class="deleteButton dButton" href="#">

正しく機能するものはこのようなリンクを作成しますが、

<a href='#' class='deleteButton'>

インスペクターをチェックインしたところ、ボタンにはイベントを発生させるために必要なクラスdeleteButtonがあると表示されていますが、完全に無視しているようです。削除ヒットはコンソールに表示されません。これはしばらくの間、私を本当に混乱させました。誰かが助けてくれることに感謝します。

4

3 に答える 3

2

イベント ハンドラーをバインドするときに、DOM に存在しない要素に対して委任されたイベントを使用する必要があります。

$(document).on('click', '.deleteButton', function(){...}

ハンドラーのバインド時に存在するコンテナーはどこdocumentにある可能性があります。.deleteButton

于 2013-08-21T14:24:59.633 に答える
0

既存のボタンはページの読み込み時にイベント ハンドラーを取得しますが、新しいボタンは後で DOM に追加されます。次のように、JavaScript コードを更新する必要があります。

$(document).on('click', '.deleteButton', function(){
    console.log("Delete Hit");
    var successful = deleteEntry($(this).attr('id'));
    if(successful == true){
        $(this).parent().parent().remove();
    }else{
        alert("Delete Unsuccessful.");
    }
});

詳細については、http: //api.jquery.com/on/#direct-and-delegated-events の jQuery ドキュメントを参照してください。

于 2013-08-21T14:24:51.143 に答える
0

イベントを委任できます。

$(document).on('click', '.deleteButton', function(e){
    //do something
});

これは、ライブバインドと「オン」の違いを説明する同様の投稿です。 動的コンテンツの更新でJquery/Javascriptはどのように動作しますか?

于 2013-08-21T14:24:59.693 に答える