将 jQuery 应用于动态插入的 div

Question

我正在使用 jQuery 编写用户脚本。我正在尝试使用 class 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，因为加载文档时只有这些 div。

如何使动态添加到 #content 的 div 的内容更改为 bar？

Answer 1

添加这个

`$(".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

Answer 2

请注意为什么不直接将 $("<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

将 jQuery 应用于动态插入的 div

Apply jQuery to dynamically inserted divs

javascript

jquery

userscripts