2

前の質問で示唆されたように、動作しないコードは次のとおりです。

    <div class="comments"></div>

    <textarea cols="" rows="" name="proposition" id="propo-textarea-spec"></textarea>

   <button id="my-btn">Make m'y request!</button>

    <div class="my-btn-spec invisible">
        <div class="section">

        <div class="info tag-comment-spec"></div>
            <p class="targetting"></p>
        </div>
    </div>

    <script>
    
        $('#my-btn').click(function() {
            var comment = $('#propo-textarea-spec').val();
    
            $('.targetting:last').text(comment);
        
            var content = $('div.my-btn-spec').html();
            $('div .comments').append(content);

        });


        $('.comments .tag-comment-spec').click(function(){
            alert('hello');
      
        });

    </script>

実際には、コードは div の追加に関しては正常に機能しますが、新しい追加の div をクリックしたときに警告メッセージをトリガーすることは不可能です。奇妙なことに、私のインスペクターは tag-comment-spec div を正しく検出しますが、クリックしても何もトリガーされません。

誰かアイデアはありますか？

4

4 に答える 4

4

動的に DOM に追加.tag-comment-specしているので、 を使用してデリゲート イベント ハンドラーが必要です.on()。

$('.comments').on('click', '.tag-comment-spec', function() {
  alert('hello');
});

.on()動的要素を使用したデリゲート イベント処理の構文は次のとおりです。

$(StaticElement).on( eventName, target, handlderFunction);

ここで、StaticElementページの読み込み時にDOMに属し、その要素を含む要素を指し、targetイベントtargetをバインドする要素です。

関連参照:

于 2012-07-01T16:34:27.440 に答える
1

.click イベントではなく、追加された div に jQuery .on 関数を使用します。

http://api.jquery.com/on/

于 2012-07-01T16:34:49.717 に答える
1

内部にアラートを含むオンクリック関数をアタッチすると、渡されたセレクターに一致する現在既存の要素にのみそのイベント ハンドラーがアタッチされます。

後で存在する可能性のあるイベントにイベント ハンドラーをアタッチするには、イベント デリゲーションを使用する必要があります。試す：

$('.comments').on('click', '.tag-comment-spec', function() {
   alert('hello');
   // Do more stuff
});
于 2012-07-01T16:35:34.560 に答える
0

おそらく、あなたは見てみたいと思うでしょう.live()。または、これは非推奨であるため、.on().
イベントリスナーの追加はページの読み込み時に行われるため、新しいコンテンツにはイベントリスナーがないと思います。この問題がある.on()か.live()、ないか。

$("#myEl").on("click", dosomething); // live and click are exchangeable here. (Only in syntax. Effectivity may be discussed.)
于 2012-07-01T16:34:48.300 に答える