我附加了一个显示警报的按钮,但单击该按钮时看不到警报。我该如何解决这个问题?
<!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>
您正在添加侦听器,然后将输入添加到 DOM。 单击事件必须在追加后绑定,以便能够将其链接到输入。
$(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" );
});
});
});
你不能那样做!你必须委派
$(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" );
});
在创建第二个按钮的同一函数中调用第二个
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>