jQuery如何将onclick事件绑定到动态添加的HTML元素

小编典典

jQuery如何将onclick事件绑定到动态添加的HTML元素

javascript

我想将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">

        <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>

编辑：我编辑了该示例以包含方法插入到其中的两个元素。在这种情况下，将alert()永远不会执行该调用。

阅读 462

2020-04-25

共1个答案

小编典典

第一个问题是，当您在具有多个元素的jQuery集合上调用append时，会为每个元素创建要添加的元素的克隆，因此丢失了附加的事件观察器。

一种替代方法是为每个元素创建链接：

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

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

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

2020-04-25