Question

我有以下javascript：

<script>
  $(document).ready(function() {
    $('[class^="commentbubble_"]').click(function () { 
      var ID = $(this).attr('class').replace('commentbubble_', '');
        $('.commentform_'+ID).toggle();
        $('#commentsection').masonry( 'reload' );
    });
  });
</script>

它适用于结果的第一页...但是对于新附加的，它将无效。有没有办法确保此功能适用于新添加的内容？

谢谢。

Answer 1

您可以尝试将事件委托给其父级，该父级在页面加载时可用，或者$(document)本身使用.on()处理程序：

$(document).ready(function() {
  $(document).on('click', '[class^="commentbubble_"]', function () { 
      var ID = $(this).attr('class').replace('commentbubble_', '');
      $('.commentform_'+ID).toggle();
      $('#commentsection').masonry( 'reload' );
  });
});

Answer 2

$（）。ready仅适用于当前元素

附加元素时，需要绑定是单击事件

Answer 3

由于您在加载页面后在ajax加载上附加数据，因此您需要使用.on事件处理程序来绑定元素上的任何事件而不是.click事件。

语法是：

.on( events [, selector ] [, data ], handler(eventObject) )

所以你的脚本将是这样的：

<script>
  $(document).ready(function() {
    $('document).on('click','[class^="commentbubble_"]',function () { 
      var ID = $(this).attr('class').replace('commentbubble_', '');
        $('.commentform_'+ID).toggle();
        $('#commentsection').masonry( 'reload' );
    });
  });
</script>

有关详情，请参阅http://api.jquery.com/on/

Answer 4

使用live

('[class^="commentbubble_"]').live ('click', function () {

注意： {@ 1}}已弃用，请按@Jai

的建议使用live

关于不适用于附加内容的元素的ajax

4 个答案: