追加元素后刷新DOM

Question

 <!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>

解决了问题:)

Answer 1

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

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

委托事件的优点是它们可以处理来自稍后添加到文档的后代元素的事件。 通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要， jQuery Docs

您的代码在这里可以正常工作，因为您在绑定事件之前添加了动态元素，但使用事件委托将使您摆脱用于添加动态元素的序列。

Answer 2

您需要对动态添加的元素使用事件委托。

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

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

Answer 3

像这样使用

<!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>

你应该为此使用事件委托

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

Answer 4

你的代码应该工作

小提琴演示

$(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");
    });
});

Answer 5

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

追加元素后刷新DOM

问题描述

5 个解决方案

解决方案1
30 2014-03-13 09:03:12

解决方案2
16 2014-03-13 09:02:51

解决方案3
6 2014-03-13 09:05:53

解决方案4
2 2014-03-13 09:05:28

解决方案5
-1 2020-04-27 13:52:34

追加元素后刷新DOM

问题描述

5 个解决方案

解决方案1 30 2014-03-13 09:03:12

解决方案2 16 2014-03-13 09:02:51

解决方案3 6 2014-03-13 09:05:53

解决方案4 2 2014-03-13 09:05:28

解决方案5 -1 2020-04-27 13:52:34

解决方案1
30 2014-03-13 09:03:12

解决方案2
16 2014-03-13 09:02:51

解决方案3
6 2014-03-13 09:05:53

解决方案4
2 2014-03-13 09:05:28

解决方案5
-1 2020-04-27 13:52:34