应用jQuery动态插入的div

Question

我写使用jQuery一个userscript。我试图使其包含foo改变的div的内容与类bar。随着元素的静态列表，我可以用$(document).ready()做到这一点：

// The userscript
$(document).ready(function() {
  $(".foo").text("bar");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
  <div class="foo">foo</div>
  <div class="foo">foo</div>
</div>

然而，我无法弄清楚如何替换获得动态插入的div的文字：

// The userscript
$(document).ready(function() {
  $(".foo").text("bar");
});

// A function to dynamically add another div:
$("#add").click(function() {
  $("<div></div>").text("foo").addClass("foo").appendTo("#content");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
  <div class="foo">Div 1</div>
  <div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to 

使用$(document).ready()只适用于静态插入div的，因为这些是唯一有加载文档时。

我怎样才能让动态添加到#content的div让他们的内容改为bar？

Answer 1

注知道为什么你不只是改变$("<div></div>").text("foo")到$("<div></div>").text("bar");

但在你$(document).ready()代码只运行一次。

所以做这样的事情。

// The userscript
$(document).ready(function() {
  footext();
});

// A function to dynamically add another div:
$("#add").click(function() {
  $("<div></div>").text("foo").addClass("foo").appendTo("#content");
  footext();
});

function footext() {
  $(".foo").text("bar");
}

演示

// The userscript
$(document).ready(function() {
  footext();
});

// A function to dynamically add another div:
$("#add").click(function() {
  $("<div></div>").text("foo").addClass("foo").appendTo("#content");
  footext();
});

function footext() {
  $(".foo").text("bar");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
  <div class="foo">Div 1</div>
  <div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to

您还可以使用DOMNodeInserted

$('body').on('DOMNodeInserted', '.foo', function () {
      $(this).text("bar");
});

演示

// The userscript
$(document).ready(function() {
  $(".foo").text("bar");
});

// A function to dynamically add another div:
$("#add").click(function() {
  $("<div></div>").text("foo").addClass("foo").appendTo("#content");
});

$('body').on('DOMNodeInserted', '.foo', function () {
      $(this).text("bar");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
  <div class="foo">Div 1</div>
  <div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to

Answer 2

收藏此

`$(".foo").text("bar");` 

里面的按钮点击功能。

// The userscript
$(document).ready(function() {
  $(".foo").text("bar");
});

// A function to dynamically add another div:
$("#add").click(function() {
  $("<div></div>").text("foo").addClass("foo").appendTo("#content");
   $(".foo").text("bar");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
  <div class="foo">Div 1</div>
  <div class="foo">Div 2</div>
</div>
<button id="add" type="button">Add</button> // Click to