Question

我正在尝试创建一个侦听最近制作的HTML事件的click事件侦听器。整个选择器让我很困惑。这是我的代码：

var counter = 0;

$("#button").click(function() {
    $(".slick").last().after("<div class='box'></div><div class='slick'></div>")
});

// With on():

$(".slick").on("click", function() {
    $(".box").css("background-color", "blue");
});

.box {
  background-color: red;
  padding: 3px;
  margin: 4px;
  height: 20px;
  width: 60px;
}
.slick {
  background-color: #B2B2B2;
  padding: 3px;
  margin: 4px;
  height: 10px;
  width: 40px;
}
#button, #button1 {
  background-color: #BCBCBC;
  padding: 3px;
  width: 90px;
  margin: 7px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="slick"></div>
<div class="box"></div>
<div class="slick"></div>
<div id="button">New Tab</div>

正如您在此处所看到的，“新建标签”按钮添加了两个与之前完全相同的新元素。唯一的问题是，当我单击新生成的元素的.slick元素时，背景颜色不会像前两个.slick那样改变。

我不想把元素放在彼此里面。他们的树顺序应保持不变。

Answer 1

这是因为$(".slick").on("click", function() {...}); 功能相同至$(".slick").click(...)。请记住，事件绑定是在运行时完成的，这意味着新添加的.slick元素没有绑定到它的click事件。为了确保从新添加的元素中捕获click事件，您必须依赖于事件冒泡。

换句话说，您希望在运行时出现的父级别上侦听从任何 .slick元素冒泡的click事件。一个例子是文档对象：

$(document).on("click", ".slick", function() {
    $(".box").css("background-color", "blue");
});

上面的代码基本上是这样的：它指示document对象监听从slick类的任何子元素发起/冒泡的点击事件。由于文档对象已经在运行时出现，这意味着无论何时添加并点击了新的.slick元素，您的回调都会被始终触发。

理想情况下，由于性能问题，不希望将其绑定到document对象。将它绑定到运行时可用的最近父级也可以。我们假设所有.slick元素都添加到运行时标记中存在的名为<div class="slick-wrapper">的父级中，然后使用$('.slick-wrapper').on('click', '.slick', function() {...});也可以。

证明的概念：

＆＃13;

var counter = 0;

$("#button").click(function() {
    $(".slick").last().after("<div class='box'></div><div class='slick'></div>")
});

$(document).on("click", ".slick", function() {
    $(".box").css("background-color", "blue");
});

＆＃13;

.box {
  background-color: red;
  padding: 3px;
  margin: 4px;
  height: 20px;
  width: 60px;
}
.slick {
  background-color: #B2B2B2;
  padding: 3px;
  margin: 4px;
  height: 10px;
  width: 40px;
}
#button, #button1 {
  background-color: #BCBCBC;
  padding: 3px;
  width: 90px;
  margin: 7px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="slick"></div>
<div class="box"></div>
<div class="slick"></div>
<div id="button">New Tab</div>

＆＃13;

Answer 2

您可以添加样式标记以影响将来创建的元素。像这样：

.box {
  background-color: red;
  padding: 3px;
  margin: 4px;
  height: 20px;
  width: 60px;
}
.slick {
  background-color: #B2B2B2;
  padding: 3px;
  margin: 4px;
  height: 10px;
  width: 40px;
}
#button, #button1 {
  background-color: #BCBCBC;
  padding: 3px;
  width: 90px;
  margin: 7px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="slick"></div>
<div class="box"></div>
<div class="slick"></div>
<div id="button">New Tab</div>

Trigger.vbs

Answer 3

如果您点击＆＃34;新标签＆＃34;按钮，js添加新的框和光滑，前2个光滑将改变所有框的颜色，但较新的不是。这样做的原因是，首先将事件添加到光滑元素中，然后在其之后创建一个新元素。此代码也将为新的代码添加事件：

$("body").on("click", ".slick", function() {
     $(".box").css("background-color", "blue");
});

JQuery事件委托混淆

3 个答案: