添加元素后刷新DOM

Question

添加元素后刷新DOM

27

<!doctype html>
<html>

<head>
  <title>test</title>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
      $("#but").on("click", function() {
        alert("bla bla");
      });
    });
  </script>
</head>

<body id="main_body"></body>

</html>

为什么在添加DOM元素后警报不起作用？应该在单击后显示“bla bla”。

解决方案

主要问题出在这里：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

我认为jQuery版本太旧了。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

解决了问题 :)

- user3345547

4

如果您解决了您的问题，应该添加答案。您的问题不再是一个问题，因此现在是无用的！ - Liam

1

这个问题似乎不适合讨论，因为它已经不是一个问题了。原帖作者已删除所有问题内容并用自己的回答替代了问题。 - Liam

5个回答

18

您需要使用事件代理来处理动态添加的元素。

$(document).ready(function() {
    $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
    $('#main_body').on('click', '#but', function() {
        alert( "bla bla" );
    });
});

事件委托允许我们将单个事件侦听器附加到父元素上，它将为与选择器匹配的所有子元素触发，无论这些子元素现在是否存在或将来添加

- Felix

7

使用方法如下

<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

    $(document).ready(function () {
        $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
        $(document).on("click", "#but", function () {
            alert("bla bla");
        });
    });

</script>
</head>
<body id="main_body">
</body>

你应该使用事件委派来实现此功能。

它可以帮助你为动态创建的元素附加处理程序。

- Anoop Joshi P

问题出在这里：我认为 jQuery 版本太旧了。解决方法是：问题已经解决 :) - user3345547

3

你的代码应该正常工作。

Fiddle演示

$(document).ready(function () {
    $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
    $("#but").on("click", function () { //element is in DOM now as it added in previous statement
        alert("bla bla");
    });
});

- Tushar Gupta - curioustushar

问题出在这里：我认为 jQuery 版本太旧了。解决方法是：问题已经解决 :) - user3345547

@user3345547 很高兴你找到了解决方案 :)。你的代码是正确的，正如我在答案中所指出的一样 :)。 - Tushar Gupta - curioustushar

-2

$('#main_body').append("something").ready(() => {
  $('#but').click(() => {
  }) 
});

- Ray Anthony Solon

4

没有解释的答案比只有代码的答案更容易被 Downvote。而且，无论在什么上下文中使用，.ready 始终等同于 $(document).ready。换句话说，这并没有解决 OP 的代码所做不到的任何问题（只需将其更新为 jQuery 的更高版本即可）。 - Heretic Monkey

我之前也遇到了同样的问题。我无法调用最近添加的元素。所以我发现，在添加后并在DOM加载完成后，这是您可以调用它们的时间。至少对我来说是这样。 - Ray Anthony Solon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adil · Accepted Answer

对于动态添加的元素，您需要使用事件委托，在jQuery的 on() 其他版本中使用，可以将事件委派给动态添加元素的静态父级。在您的情况下，您可以使用 #main_body

$('#main_body').on( "click", "#but", function() {
    alert( "bla bla" );
});

委托事件的优点是它们可以处理后来添加到文档中的后代元素中的事件。通过选择在附加委派事件处理程序时保证存在的元素，您可以使用委派事件避免频繁地附加和删除事件处理程序。jQuery 文档您的代码在这里正常工作是因为在绑定事件之前添加了动态元素，但使用事件委托将使您摆脱添加动态元素所使用的顺序限制。