3

行のあるページがあり、各行にはいくつかの入力フィールドと何かを実行するボタンが含まれています。ボタンにはクラス .super-button があります。23行あり、AJAXで24行目を取得して以下に挿入したとしましょう。クリックイベントでいくつかの機能をボタンにバインドしたいとします。

私が今していることは次のとおりです。

$(".super-button").off("click");
$(".super-button").on("click", function(){
    /// Do some awesome functionality
});

イベントをDOMに新しく挿入された要素にバインドするより良い方法はありますか?

4

3 に答える 3

9

静的な直接の親にイベントを委任できます。

そうすることで、一度だけイベントを関連付けることができます..

$("body").on("click",".super-button", function(){
    /// Do some awesome functionality
});

これにより、新しい要素が作成されるたびに .on ()と.off( )を使用する必要がなくなります。

注：ここで、ボディは最も近い静的な親、おそらく行が存在するテーブルに置き換えることができます.マークアップがわからないため、ボディを使用して委任しています。

于 2012-10-09T20:56:37.057 に答える
5

on()を使用すると、動的要素にイベントを関連付けることができます。実際に意図したターゲット要素を 2 次パラメーターとして指定して、最も近い静的要素 (またはドキュメント) にバインドします。

$("document").off("click", ".super-button").on("click", ".super-button", function(){
    /// Do some awesome functionality
});

off()コードはワイヤーアップ コードのみを実行するように設計する必要があるため、理論的には必要ありません。

for delegationのバージョンを使用してイベントのアタッチを実行するon()と、指定されたセレクターに一致する将来の要素には、期待どおりにイベントがアタッチされます。

デモ- 動的に追加された要素へのイベントの添付

DEMO には次の HTML があります。

<button id="addElement" type="button">Add a dynamic element</button>

<div id="container">
    <div class="someElement">Some Element - click me<div>
</div>

そしてスクリプト：

$("#container").on("click", ".someElement", function(){
    alert("I have been clicked");
});

$("#addElement").on("click", function() {
    $('<div class="someElement">Another Element - click me too<div>').appendTo($("#container"));
});​
于 2012-10-09T20:59:18.147 に答える
0

dblclickAJAX 呼び出しからの応答を受け取った後、既に宣言されているテーブルに追加する行にイベントをバインドしようとしていました。する必要はありませんでした.appendTo($("#container"));。

なぜ実際に必要なのか、いくつか光を当てていただけますか？

私のサンプル:

$(".divRightDiv table tbody").on("dblclick", ".thisRow", function () {
    //whatever I want to do
});

AJAX Success では、次のようにします。

for (var i = 0; i < msg.d.length; i++) {
        if (oddEven == 'even') {
            oddEven = 'odd';
        }
        appendRows += "<tr class='" + oddEven + " thisRow'><td>" + msg.d[i].c_Id + "</td><td>" + msg.d[i].c_Name + "</td></tr>";"</td></tr>");
    }
    $(".tblTableName").append(appendRows);
于 2013-12-17T08:06:25.477 に答える