jQuery 如何将 onclick 事件绑定到动态添加的 HTML 元素 [英] jQuery how to bind onclick event to dynamically added HTML element

查看：31 发布时间：2021/12/1 14:15:29 javascript jquery bind

本文介绍了jQuery 如何将 onclick 事件绑定到动态添加的 HTML 元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想将 onclick 事件绑定到我使用 jQuery 动态插入的元素

但它从不运行绑定函数.如果你能指出为什么这个例子不起作用以及我如何让它正常运行，我会很高兴:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da"><头><title>点击绑定测试</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script type="text/javascript">jQuery(函数(){close_link = $('<a class="" href="#">单击此处查看警报</a>');close_link.bind("点击", function(){alert('来自绑定函数调用的你好');//在这里做些事情...});$('.add_to_this').append(close_link);});<身体><h1 >点击绑定测试</h1><p>问题:将点击事件绑定到我通过 JQuery 附加的元素.</p><div class="add_to_this"><p>链接被创建，然后在下面添加:</p>

<div class="add_to_this"><p>下面添加了另一个:</p>

</html>

我编辑了示例以包含该方法插入到的两个元素. 在这种情况下，永远不会执行 alert() 调用.(感谢@Daff 在评论中指出这一点)

解决方案

第一个问题是，当您在具有多个元素的 jQuery 集上调用 append 时，会为每个元素创建一个要追加的元素的副本，因此附加的事件观察者丢失.

另一种方法是为每个元素创建链接:

function handler() { alert('hello');}$('.add_to_this').append(function() {return $('<a>点击这里</a>').click(handler);})

另一个潜在的问题可能是在元素被添加到 DOM 之前附加了事件观察器.我不确定这是否有什么要说的，但我认为这种行为可能被认为是不确定的.更可靠的方法可能是:

function handler() { alert('hello');}$('.add_to_this').each(function() {var link = $('点击这里');$(this).append(link);链接.点击(处理程序)；});

I want to bind an onclick event to an element I insert dynamically with jQuery

But It never runs the binded function. I'd be happy if you can point out why this example is not working and how I can get it to run properly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
        <head>
          <title>test of click binding</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
          <script type="text/javascript">


        jQuery(function(){
          close_link = $('<a class="" href="#">Click here to see an alert</a>');
          close_link.bind("click", function(){
            alert('hello from binded function call');
            //do stuff here...
          });
  
          $('.add_to_this').append(close_link);
        });
          </script>
        </head>
        <body>
          <h1 >Test of click binding</h1>
          <p>problem: to bind a click event to an element I append via JQuery.</p>

          <div class="add_to_this">
            <p>The link is created, then added here below:</p>
          </div>

          <div class="add_to_this">
            <p>Another is added here below:</p>
          </div>


        </body>
        </html>

EDIT: I edited the example to contain two elements the method is inserted to. In that case, the alert() call is never executed. (thanks to @Daff for pointing that out in a comment)

解决方案

The first problem is that when you call append on a jQuery set with more than one element, a clone of the element to append is created for each and thus the attached event observer is lost.

An alternative way to do it would be to create the link for each element:

function handler() { alert('hello'); }
$('.add_to_this').append(function() {
  return $('<a>Click here</a>').click(handler);
})

Another potential problem might be that the event observer is attached before the element has been added to the DOM. I'm not sure if this has anything to say, but I think the behavior might be considered undetermined. A more solid approach would probably be:

function handler() { alert('hello'); }
$('.add_to_this').each(function() {
  var link = $('<a>Click here</a>');
  $(this).append(link);
  link.click(handler);
});

这篇关于jQuery 如何将 onclick 事件绑定到动态添加的 HTML 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

jQuery 如何将 onclick 事件绑定到动态添加的 HTML 元素 [英] jQuery how to bind onclick event to dynamically added HTML element

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

jQuery 如何将 onclick 事件绑定到动态添加的 HTML 元素 [英] jQuery how to bind onclick event to dynamically added HTML element

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭