Question

我试图在将某些元素绑定到视图中之后触发事件。

我正在尝试使用以下内容，但它不起作用：

$(".featWrap").on("load", ".box", function() {
     $(".featWrap").slick({dots: true});
});

使用以下作品，但我需要在绑定元素时触发事件，而不是在单击时触发：

$(".featWrap").on("click", ".box", function() {
     $(".featWrap").slick({dots: true});
});

我正在考虑在绑定后使用自定义事件，但我无法这样做，因为绑定数据的函数如下所示：

APP.bind["game.featuredPrizes"]    = APP.get("user.featuredPrizes", function (featuredPrizes) {
    return featuredPrizes.map(formatFeatured);
});

Answer 1

如果您想收听新的dinamically添加元素，可以使用Mutation events。在这里您可以找到documents browser support for mutation events。

一个小小的演示：

// listen for the newly added elements with class box
$(document).on('DOMNodeInserted', '.box', function (e) {
  var element = e.target;
  setTimeout(function () {
    $(element).fadeOut(1000, function () {
      $(this).remove();
    });
  }, 2000);
});

$(function () {
  
  // create and add a new element on the fly
  
  $('#insert').on('click', function (e) {
    $('<div/>', {
      class: 'test',
      text: 'Test Generic'
    }).appendTo('body');
  });
  
  $('#insertBox').on('click', function (e) {
    $('<div/>', {
      class: 'box',
      text: 'Test Generic'
    }).appendTo('body');
  });

});

.box {
  padding: 1em;
  background: #ffa;
  border: 1px solid #999;
}
.test {
  padding: 1em;
  background: #008000;
  border: 1px solid #999;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<button id="insertBox">Insert box</button>
<button id="insert">Insert a generic element</button>

Answer 2

我需要在绑定元素时触发事件，而不是在单击时触发：

这似乎不可能

$("#id").on("bind", function() {
    // This is what you want to achieve
    // Calling this function when an event has been binded to $("#id")
    console.log("bind click binded");
});

$("#id").bind("click", function() {
    console.log("click binded");
});

jQuery - 加载动态添加的元素

2 个答案: