1

jqueryを試しながら、このhtmlとjavascriptを作成しました。

<body>
<div id="results">
<div class="mylinkdiv">
<a class="mylinkclass" href="#">8</a>
: This is supposed to be a toaster.
<br>
<a class="mylinkclass" href="#">14</a>
: with a toaster maybe.
<br>
<a class="mylinkclass" href="#">51</a>
: If we're really creative.
<br>

</div>
</div>
<button id="remove" type="button" > Remove</button>
<button id="add" type="button" > Add</button>

</body>

javascriptには、リンクテキストを含むメッセージをポップアップする機能があります。また、divにいくつかのリンクを追加する機能もあります。内側のdivを削除するremoveという名前の関数もあります。

$(document).ready(function(){
    $('.mylinkclass').click(function(){
           getLinkText(this);
        });

    $('#remove').click(function(){
           removeContents();
        });

     $('#add').click(function(){
           addContents();
        });
});

function getLinkText(that){
    var txt = $(that).text();
    var num = parseInt(txt);
    alert('num='+num);
    return false;
}

function addContents(){
  $('#results').append('<a class="mylinkclass" href="#">70</a>  new line1 <br>');
  $('#results').append('<a class="mylinkclass" href="#">77</a> new line2<br>');
}

function removeContents(){
  $('.mylinkdiv').remove();      
}

元のhtmlページのリンク（つまり、3つのリンク）をクリックすると、アラートボックスがポップアップします。

追加ボタンをクリックすると、divに2つの新しいリンクが追加されますが、新しく追加されたリンクをクリックしても、アラートはポップアップしません。

理由がわかりません。誰か教えてもらえますか？

4

4 に答える 4

3

jQuery 1.7を使用している場合は.onを使用し、jQuery1.6を使用している場合は.delegateを使用します

jQuery('#results').on('click','.mylinkclass',function() {
    getLinkText(this);
});

デモ

これを行う別の方法は、既存の要素であるデモのクローンを作成することです。

var cloned = jQuery('.mylinkclass:last').clone(true);
jQuery('#results').append(cloned);

2番目のケースでは、イベントリスナーもコピーされるため、.onまたは.delegateを使用する必要はありません。

于 2012-05-25T18:27:05.630 に答える
2

アイテムはdomのロード後に動的に作成されるため、デリゲートイベントハンドラーが必要です。

$('#results').on('click', '.mylinkclass', function() {
    getLinkText(this);
});
于 2012-05-25T18:26:24.840 に答える
1

最初にページをロードした後に DOM にリンクを追加すると、リンクは jQuery イベントにバインドされません。以下を使用する必要があります。

$(document).on('click', '.mylinkclass', function() {

});

この問題に最初に遭遇したときは「live()」を使用していましたが、jQuery のドキュメントによると非推奨になっているため、使用しないでください。

于 2012-05-25T18:28:15.820 に答える
0

このようにする必要があります：

$ ('. mylinkclass'). live ('click', function () {
alert ('OK')
});
于 2012-05-25T18:43:19.693 に答える