Question

我正在使用jquery并在ul上动态创建一些li，a和$('document').ready()。在此之后，浏览器中的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()中创建的。请提供解决方案。

Answer 1

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

您可以这样做：

    $(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（）之前创建。

Answer 2

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

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

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

2 个答案: