jQuery 追加和刷新 DOM

Question

我附加了一个显示警报的按钮，但是当我单击该按钮时我看不到警报。我该如何解决这个问题？

<!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() {
    $("#myButton").on('click', function() {
          $("<h1>Hello</h1><input id=\"but\" type=\"button\">Click").appendTo("#main_body"); 
    });
    $( "#but" ).on( "click", function() {
        alert( "bla bla" );
    });    
});   
</script> 
</head>

<body id="main_body"> 
    <input type="button" value="Tıkla" id="myButton" />
</body>
</html>

Answer 1

您正在添加侦听器，然后将输入添加到 DOM。 click事件必须绑定在append之后，才能link它来输入。

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

});

Answer 2

你不能那样做！你必须委派

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

Answer 3

在创建第二个按钮的同一函数中调用第二个 onclick 函数。这会奏效的，我的好先生。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>

<body id="main_body"> 
    <input type="button" value="Tıkla" id="myButton" />
</body>
</html>

jQuery 追加和刷新 DOM

jQuery Append and Refresh DOM

jquery

refresh

append