Question

我是jquery的新手，我有一个按钮点击事件，但是当我使用append（）在div中添加按钮时，它有效。点击事件不起作用

我的代码如下：

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

Answer 1

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

Answer 2

因为按钮是动态创建的，所以它不能由“自身”触发，而是通过静态元素触发，例如<body>：

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

Answer 3

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

Answer 4

在DOM中元素存在之前，您可能会这样做。您可能应该在</body>之前而不是<head>标记中添加脚本。

Answer 5

你需要在那里添加几行！

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

jQuery Appended按钮单击事件处理程序无法正常工作

5 个答案: