use*_*547 20 javascript jquery
解决了:
主要问题在于:
<!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>
我觉得jquery太老了
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
解决了问题:)
添加DOM后为什么警报不起作用？点击它后应显示"bla bla".
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Adi*_*dil 26
对于动态添加的元素,您需要事件委托,在jQuery on()上使用其他版本,您可以将事件委托给动态添加元素的静态父级.在你的情况下你可以使用#main_body
$('#main_body').on( "click", "#but", function() {
alert( "bla bla" );
});
委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序,jQuery Docs的需要
您的代码在此处工作,因为您在绑定事件之前添加动态元素,但使用事件委派将使您从用于添加动态元素的序列中解脱出来.
Fel*_*lix 13
您需要使用事件委派来动态添加元素.
$(document).ready(function() {
$('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
$('#main_body').on('click', '#but', function() {
alert( "bla bla" );
});
});
事件委托允许我们将单个事件侦听器附加到父元素,该元素将为匹配选择器的所有子项触发,无论这些子项现在是存在还是将来添加
像这样使用
<!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>
你应该使用事件委托为
它可以帮助您为动态创建的元素附加处理程序
| 归档时间： |
|
| 查看次数： |
84053 次 |
| 最近记录： |