javascript - JQuery 不在 "refreshed"元素上注册事件

标签 javascript jquery html css

我真的不知道如何正确解释这一点,但我正在学习如何使用 AJAX,虽然我已经很清楚了,但我遇到了 JQuery 未引用调用的问题在 DIV 末尾重新生成的按钮。重新生成此按钮的原因是因为它位于内容被替换的 div 内部。 (在这种情况下,它是视频循环)。

我附上了一个显示我的问题的 JSFiddle。

我的 javascript 文件加载在我 body 的底部,如下所示:

<html>
   <head>
       ...
   </head>

   <body>
      ...
      <script src="..."></script>
   </body>
</html>

var i = 0;
$('#bar').on('click', function() {
  i++;
  $('#foo').html('<button id="bar">Test button: ' + i + '</button>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="foo">
  <button id="bar">Test button: 0</button>
</div>

最佳答案

因为您正在使用 jQuery 动态生成 HTML,请尝试使用事件委托(delegate):-

var i = 0;
$('#foo').on('click', '#bar' ,function() {
  i++;
  $('#foo').html('<button id="bar">Test button: ' + i + '</button>');
});

或者

var i = 0;
$(document.body).on('click', '#bar' ,function() {
  i++;
  $('#foo').html('<button id="bar">Test button: ' + i + '</button>');
});

Fiddle

关于javascript - JQuery 不在 "refreshed"元素上注册事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28716940/

相关文章:

javascript - 表单验证不验证密码

javascript - 将属性从 JQuery-UI-ContextMenu 触发器传递到菜单构造

javascript - DOM 属性更改时触发事件

html - HTML 中的 Sprite 图像,它们是否在显示任何内容之前加载?

javascript - 当最大高度减小时,最大高度过渡不起作用

php - 如何保存复选框和下拉列表中的所有值

javascript - 如何像 Apple 那样自定义嵌入式 QuickTime 控件?

javascript - 替换 Div 和重置 Div (Jquery)

javascript - 在 Angularjs 中刷新后保留所选行

javascript - 将输入字段添加到表单