Question

我正在使用jQuery编写用户脚本。我正在尝试使用类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

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

将jQuery应用于动态插入的div

2 个答案: