这是index.html
:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.btn_test').click(function() { alert('test'); });
});
function add(){
$('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
}
</script>
</head>
<body>
<a href="javascript:;" class="btn_test">test1</a>
<a href="javascript:;" onclick="add()">add</a>
</body>
如果我点击 test1
链接,它会显示 alert('test')
,但是如果我点击 add
链接然后点击测试
,它没有显示任何东西。
你能解释一下吗?
最佳答案
对于 2011 年后出现此问题的用户,有一种新的正确方法可以做到这一点:
$(document).on('click', '.btn_test', function() { alert('test'); });
这是 jQuery 1.7 的版本。
有关详细信息,请参阅 Direct and delegated events
关于javascript - jQuery 函数未绑定(bind)到新添加的 dom 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6537323/