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

当您.tag-comment-spec动态附加到 DOM 时，您需要使用.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

对附加的 div 使用 jQuery .on 函数，而不是 .click 事件。

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

于 2012-07-01T16:34:49.717 回答
1

When you attach the on click function with the alert inside you are only attaching that event handler to currently existing elements matching the passed selector.

You need to use event delegation to attach event handlers to events that may exist down the line. Try:

$('.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 回答