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()委托事件处理程序。

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

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

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

其中，StaticElement是指在页面加载时属于DOM的元素，包含target元素，target是要绑定事件的元素。

相关参考：

jQuery .on()

Answer 2

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

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

Answer 3

当您使用内部警报附加on click函数时，您只将该事件处理程序附加到与传递的选择器匹配的当前现有元素。

您需要使用事件委派将事件处理程序附加到可能存在于该行的事件。尝试：

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

Answer 4

您可能希望查看.live()。或者，因为这已被弃用，.on() 我认为新内容没有eventlistener，因为添加事件侦听器是在页面加载。使用.on()或.live()，您没有遇到此问题。

$("#myEl").on("click", dosomething); // live and click are exchangeable here. (Only in syntax. Effectivity may be discussed.)

未检测到单击事件

4 个答案: