0

サーバーからのAJAX呼び出しで返されたデータの長い文字列からHTML（a hrefs）を引き出して、それらをDOMに追加しようとしています。以前の回答でいくつかの例に従ってみましたが、DOM要素を取得できないようです。リンクとして追加されているように見えますが、クリック可能です。したがって、ステップバックして、別の要素をクリックしたときに1つの新しい要素を追加しようとしましたが、これも機能しません-jsfiddleで試しましたが、コードの基本的な例は次のとおりです-getsearchresultsをクリックすると、ahrefが表示されますsearchresults div内ですが、クリックしても.clicakable_searchハンドラーは起動されません。

HTML検索結果を取得する

結果

JSコード

    $(document).ready(function() {
        $("#getsearchresults_id").click(function(event) {
        var aa = $('<a href="#" class="clickable_search">parsed substring from the return data</a>');
        $('#searchresults').append(aa);
    });

    $('.clickable_search').click(function(e) {
        console.log(".clickable_search");
        e.preventDefault();
        alert('anchor without a href was clicked');
    });
   });
4

2 に答える 2

0

製本時にdomに存在していなかったためです。委任は、イベントハンドラーを親要素にバインドします。親要素は、イベントがバブルアップするときにイベントをリッスンします。親要素が静的要素であることを確認してください

委任を使用する-jQuery1.7以降を使用する場合に推奨される方法

$('#searchresults').on('click', '.clickable_search',function(e){ 
    console.log(".clickable_search");
    e.preventDefault();
    alert('anchor without a href was clicked');
});​

jQuery1.7以下

$('#searchresults').delegate('.clickable_search','click', function(e){ 
    console.log(".clickable_search");
    e.preventDefault();
    alert('anchor without a href was clicked');
});​

または要素がdomに追加された後にバインドします-これは、複数回クリックされた場合に複数を追加します

$(document).ready(function() {
    $("#getsearchresults_id").click(function(event) {
        var aa = $('<a href="#" class="clickable_search">parsed substring from the return data</a>');
        $('#searchresults').append(aa);
        $('.clickable_search').click(function(e) { //< --it 's your other click function
            console.log(".clickable_search");
            e.preventDefault();
            alert('anchor without a href was clicked ');
        });
    });
});​
于 2012-10-19T15:19:01.383 に答える
0

.live（）を使用して、現在および将来の現在のセレクターに一致するすべての要素のイベントをバインドできます。以下のコードを見てください：

$('.clickable_search').live('click', function(e) {
    console.log(".clickable_search");
    e.preventDefault();
    alert('anchor without a href was clicked');
});

http://jsfiddle.net/Mdv7A/でデモを見ることができます

アップデート

@wireyが言うように、以下に示すように、.live（）を.on（ ）で撃退す​​ることができます。

$('body').on('click', '.clickable_search', function(e) {
    console.log(".clickable_search");
    e.preventDefault();
    alert('anchor without a href was clicked');
});

http://jsfiddle.net/Mdv7A/3/

于 2012-10-19T15:26:51.227 に答える