jQuery附加按钮单击事件处理程序不工作
问题描述:
我是jquery的新手,我有一个按钮单击事件,它运行良好,但是当我使用append()将附加按钮在div内。单击事件不起作用jQuery附加按钮单击事件处理程序不工作
我下面的代码:
$('#button').click(function() {
alert('works');
$('#element').show("slow");
});
答
你必须使用jQuery event-delegation: -
$(document).on('click', "#button", function() {
alert('works');
$('#element').show("slow");
});
工作例如: -
$('#append_button_dynamically').append("<button id='button'>ClickMe</button>");
$(document).on('click', "#button", function() {
alert('works');
$('#element').show("slow");
});
#element{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="append_button_dynamically"></div>
<div id="element">This is hide but will show on button click</div>
答
你可能做的是,在DOM中存在的元素之前。您应该可以在</body>
而不是<head>
标记之前使用脚本。
答
因为按钮是动态创建的,它不能被触发“本身”而是通过一个静态元素来触发它,例如<body>
:
$('body').on('click', '#button', function() {
alert('works');
$('#element').show("slow");
});
答
您需要在其中添加几行!
$(document).ready(function(){
$('#button').click(function() {
alert('works');
$('#element').show("slow");
});
});
答
您的代码必须工作。您可能忘记包含JQuery
文件。检查附加的代码片段。
$('#container').append("<button id='button'>Button</button>");
$('#button').click(function() {
alert('works');
$('#element').show("slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>Button here</div>
我觉得我今天正在downvoted因为个人原因,这是第二个答案是正确的,但donwvoted,另一种被接受,但拿下'-1',这一个是正确的,得分'-2'! WTH。 –
我upvoted你的答案。我不知道人们有什么问题。 – Huelfe
@Huelfe谢谢,有些人以对其他人的帖子进行投票而感到自豪。 –