jQuery附加按钮单击事件处理程序不工作

我是jquery的新手，我有一个按钮单击事件，它运行良好，但是当我使用append（）将附加按钮在div内。单击事件不起作用jQuery附加按钮单击事件处理程序不工作

我下面的代码：

$('#button').click(function() { 
    alert('works'); 
    $('#element').show("slow"); 
});

来源

2017-09-05 Wis

我觉得我今天正在downvoted因为个人原因，这是第二个答案是正确的，但donwvoted，另一种被接受，但拿下'-1'，这一个是正确的，得分'-2'！ WTH。 –

我upvoted你的答案。我不知道人们有什么问题。 – Huelfe

@Huelfe谢谢，有些人以对其他人的帖子进行投票而感到自豪。 –

你必须使用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>

来源

2017-09-05 12:33:34

你可能做的是，在DOM中存在的元素之前。您应该可以在</body>而不是<head>标记之前使用脚本。

来源

2017-09-05 12:33:29

因为按钮是动态创建的，它不能被触发“本身”而是通过一个静态元素来触发它，例如<body>：

$('body').on('click', '#button', function() { 
    alert('works'); 
    $('#element').show("slow"); 
});

来源

2017-09-05 12:34:00

您需要在其中添加几行！

$(document).ready(function(){ 
    $('#button').click(function() { 
      alert('works'); 
      $('#element').show("slow"); 
    }); 
});

来源

2017-09-05 12:34:59 JaTurna

您的代码必须工作。您可能忘记包含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>

来源

2017-09-05 12:35:34

jQuery附加按钮单击事件处理程序不工作

回答

相关问题