Question

我在div中有一些元素，使用他们的类我定义了一些jquery。当我添加（追加）具有相同类的新div时，jquery不起作用。

在下面的代码段中，“＆＃39; old＆＃39;是硬编码和jquery工作正常，但新的＆＃39;附加并且相同的jquery不起作用。

＆＃13;

$(".ele").on("click", function() {
  $(this).hide();
});
$("#more").on("click", function() {
  $("<div class='ele'></div>").appendTo("#all");
});

＆＃13;

.ele {
  width: 20px;
  height: 20px;
  margin: 10px;
  background-color: #bbb;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="more" style="cursor: pointer">click to add box</div>
<br/>
<div id="all">
  <div>Instruction: click the boxes to hide</div>
  <div>Old Elements:</div>
  <div class="ele"></div>
  <div class="ele"></div>
  <div class="ele"></div>
  <br/>
  <br/>
  <div>New Elements:</div>
</div>

＆＃13;

我想在预定义的jquery工作的同一个类上添加div。请帮助。

Answer 1

你的方法接近工作，但如果元素是动态生成的，你必须调用已经存在的父元素并将目标元素放在on()函数中......否则它不会得到识别。

有关更好的说明，请参阅：http://api.jquery.com/on/

＆＃13;

$("#all").on("click",".ele", function() {
  $(this).hide();
});
$("#more").on("click", function() {
  $("<div class='ele'></div>").appendTo("#all");
});

＆＃13;

.ele {
  width: 20px;
  height: 20px;
  margin: 10px;
  background-color: #bbb;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="more" style="cursor: pointer">click to add box</div>
<br/>
<div id="all">
  <div>Instruction: click the boxes to hide</div>
  <div>Old Elements:</div>
  <div class="ele"></div>
  <div class="ele"></div>
  <div class="ele"></div>
  <br/>
  <br/>
  <div>New Elements:</div>
</div>

＆＃13;

附加新div时jquery无法正常工作

1 个答案: