javascript - jQuery 函数未绑定(bind)到新添加的 dom 元素

标签 javascript jquery onclick

这是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/

相关文章:

javascript: 在不同的iframe中加载相同的url,如何仅使用一个http请求?

javascript - IFrame OnReadyStateChange 函数

android - myIntent.putExtra 在 listView onClick 期间

jquery - 菜单将打开但不会关闭

javascript - 使用 JQuery 的简单添加功能

javascript - 每次单击按钮时,我都想在两个功能之间切换

php - 如何将 JavaScript 数组传递给 onclick ="(' ')"?

javascript - 使用 Axios 在 Microsoft Teams 中发布消息

javascript - 如何在 Knockout 中将参数传递给计算函数?

javascript - React - 无法读取未定义的属性,尽管我在构造函数中绑定(bind)了该函数