Question

为什么在追加DOM后警报不起作用？点击它后应该显示“bla bla”。

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

解决

主要问题在于：

<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

您的代码正常工作here因为您在绑定事件之前添加动态元素，但使用事件委派将使您从用于添加动态元素的序列中解脱出来。

Answer 2

您需要使用 event delegation 来动态添加元素。

$(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>

你应该使用event delegation

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

Answer 4

您的代码应该有效

Fiddle Demo

$(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 个答案: