将 HTML 添加到 JQuery 同位素 additems/insertitems 第 2 部分答案

【问题标题】：Adding HTML to JQuery Isotope additems/insertitems Part 2将 HTML 添加到 JQuery 同位素 additems/insertitems 第 2 部分
【发布时间】：2016-04-08 09:32:40
【问题描述】：

接下来是：

Adding HTML to JQuery Isotope additems/insertitems

我有布雷迪的：

function makeDataSlide(slideId, imgSrc, slideTitle) {
  var slide = $('<li data-target="#myCarousel" data-slide-to="'+ slideId +'"></li>');
  var gridItem = $('<div class="grid-item" style="display:none"></div>');
  $(gridItem).append('<img src="'+ imgSrc +'">');
  $(gridItem).append('<h4>'+ slideTitle +'</h4>');
  $(slide).append(gridItem);
  return slide;
}

$('.button').on( 'click', function() {
    var $items = [
      makeDataSlide(8, 'img/btn.png', 'XXXXX'),
      makeDataSlide(9, 'img/btn.png', 'XXXXX'),
      makeDataSlide(10, 'img/btn.png', 'XXXXX'),
      makeDataSlide(11, 'img/btn.png', 'XXXXX'),
    ]
    $grid.isotope( 'insert', $items);
});

没有错误，但是按钮没有做任何事情？

【问题讨论】：

不做任何事情是指它不起作用还是点击时没有执行？
确保 '$(.button').on(...)' 包含在 $(document).ready() 中。应为：“ $(document).ready(function() { $('.button').on(...) });

标签： javascript jquery dom jquery-isotope

【解决方案1】：

确保 '$(.button').on(...)' 包含在 $(document).ready() 中。

应改为：

$(document).ready(function() { 
    $('.button').on(...);
});

【讨论】：

但是，该按钮在单击时仍然没有任何反应，它是可单击的，只是没有任何反应。
@Alex，抱歉之前放了这个！但不，该功能没有控制台错误。
@fdsfdf，你能用你当前的代码创建一个 jsfiddle 并粘贴链接吗？