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

javascript jquery bind

2022-08-30 03:04:51

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

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

答案 1

所有这些方法都已弃用。您应该使用该方法来解决您的问题。on

如果要以动态添加的元素为目标，则必须使用

$(document).on('click', selector-to-your-element , function() {
     //code here ....
});

这将替换已弃用的方法。.live()

答案 2

第一个问题是，当您在具有多个元素的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);
});