jquery - 未检测到点击事件

Question

正如前面的问题所建议的，这里的代码不起作用:

    <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，但点击没有触发任何内容。

有人有想法吗？

Answer 1

当您将 .tag-comment-spec 动态附加到 DOM 时，您需要使用 .on() 委托(delegate)事件处理程序。

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

使用动态元素进行委托(delegate)事件处理的 .on() 语法为:

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

其中，StaticElement 指的是页面加载时属于 DOM 的元素，并且包含 target 元素，而 target 是其上的元素。您想要绑定(bind)事件。

相关引用:

• jQuery .on()