0

次の方法でjqueryからhtmlコードの一部を送信しています

htmlCode1 = "<div class='txt_center'>\
<input type='button'  class='btn_view b widthauto' value='Add'  name='addShortlist'\ style='cursor:pointer;'";\
htmlCode1 += " id=add"+this.id+" >\
</div>";

ここでは、HTMLでIDと名前を割り当てており、これらのIDをクリックすると特定の関数を実行したいのですが、どういうわけか、onclick関数が実行されません。これに対する解決策は何ですか？

私はonclick関数を次のように呼んでいます：

$("[name='addShortlist']").click(
    function()
    {
        alert("here");
        return false;
    }
);
4

1 に答える 1

1

動的に追加されたコンテンツにイベントハンドラーを登録するためのソリューションは、 （jQuery 1.7+）または関数のいずれかを使用したイベント委任です。基本的な原則は、イベントハンドラーを静的要素（最悪の場合、ドキュメント全体）にバインドし、セレクターに一致する要素からイベントが発生した場合にのみコールバック関数を実行することです。.on().delegate()

一般的なコードは次のようになります。

$(document).on('click', '[name="addShortlist"]', function() {
    alert("here");
    return false;
});

そうすれば、セレクターに一致する要素（コードの実行後に追加された場合はイベント）をクリックするたびに[name="addShotlist"]、コールバック関数が実行されます。

詳細については、のドキュメントの「直接イベントと委任イベント.on()」というタイトルのセクションを参照してください。

アップデート

イベント委任関数にアクセスできないバージョンのjQueryを使用している場合（つまり、jQuery 1.3が追加された前.live()）、実際に必要なオプションは次のとおりです。

$(function() {
    function handleClick() {
        alert("here");
        return false;
    }

    function bindClicks() {
        $("[name='addShortlist']").unbind('click', handleClick).click(handleClick);
    }

    $("#test-button').click(function(e) {
        // dynamically add some content
        bindClicks();
    });
});

これにより、匿名のコールバック関数が名前付き関数に変換され（参照を渡すことができるように）、イベントハンドラーのバインディングが関数にラップされ（多くの場所から簡単に呼び出すことができるように）、に呼び出しが追加さ.unbind()れます。イベントハンドラーをセレクターに一致するすべての要素に再バインドする前に、既存の要素（関数が最後に呼び出されたときに存在した要素）から同一のイベントハンドラーを削除します。

于 2012-08-03T12:49:07.623 に答える