无法对动态创建的 html 元素执行单击事件

Not able to perform click event on dynamically created html elements

本文关键字：元素 执行 单击 事件 html 动态 创建      更新时间：2023-09-26

我正在使用jquery并在$('document').ready()上动态创建一些ul，li和a。在此之后，ul - 浏览器中li渲染看起来像 html 表示中的波纹管

                    <ul class="ul">
                        <li class="li">
                            <a>Some buddy</a>
                            <ul class="ul">
                                <li class="li" id="testLi">
                                    <a id="testView">test buddy</a>
                                </li>
                            </ul>
                        </li>
                    </ul>

请忽略类名。我已将 ID 分配给<li> and child ' 标签。我还有一个写成波纹管的函数：

$(document).ready(function () {
    $('#testView').click(function () {
        var ul = document.createElement('ul');
        ul.className = 'ul';
         var li = document.createElement('li');
         li.className = 'li';
         var a = document.createElement('a');
         a.innerHTML = 'test buddy';
         $(li).append(a);
         $(ul).append(li);
        $('#testLi').append(ul);
    });
});

现在，如果我单击<a id="testView">test buddy</a>我的函数不会被调用。我认为这是因为加载了 DOM 并且我的新元素是在 ready() 中创建的。请提供解决方案。

您需要将事件处理程序附加到文档并将事件委托给元素。

你可以做这样的事情：

    $(document).on('click', '#testView', function () {
        var ul = document.createElement('ul');
        ul.className = 'ul';
         var li = document.createElement('li');
         li.className = 'li';
         var a = document.createElement('a');
         a.innerHTML = 'test buddy';
         $(li).append(a);
         $(ul).append(li);
        $('#testLi').append(ul);
    });

这将应用于具有此 id 的所有元素，无论它们是否在 document.ready（） 之前创建。

您的代码工作正常。我已将其添加到下面的代码段中。

$(document).ready(function() {
  $('#testView').click(function() {
    var ul = document.createElement('ul');
    ul.className = 'ul';
    var li = document.createElement('li');
    li.className = 'li';
    var a = document.createElement('a');
    a.innerHTML = 'test buddy';
    $(li).append(a);
    $(ul).append(li);
    $('#testLi').append(ul);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul">
  <li class="li">
    <a>Some buddy</a>
    <ul class="ul">
      <li class="li" id="testLi">
        <a id="testView">test buddy</a>
      </li>
    </ul>
  </li>
</ul>

相关文章：