jquery - 如何使用 jQuery 在新生成的代码中进行编辑？

Question

我正在开发自己的项目，并且我对新的动态生成节点有一个小问题，未单击这里是代码示例:

HTML:

<ul id="container-comments">
    <li>
        <a href="#" class="comment-avatar" title="imax9">
           <img src="images/avatar.png" alt="imax9" />
        </a>
        <div class="content-box comment__body">
           <div class="comment__header">
              <a href="/user/imax9" class="comment__username">imax9</a>
              <div class="comment__meta">
                <span>8 hours ago</span>
              </div>
              <div class="edit" title="Edit">
                edit
              </div>
           </div>

          <div class="comment__content">
             <p>wonderful! Good luck with sales!</p>
          </div>
        <div class="comment__inline-edit"></div>

     </div>
   </li>

  </ul>

jQuery:

$('#comment-submit input[type=submit]').click(function (e) {
        e.preventDefault();
        updateComments(params); //this function updates the ul by adding
                                //new li contains the same html structure 
});

//it doesn't work for the new generated one
$('.edit').on('click', function () {
        var index = $('.edit').index(this);
        var commentEdit = $('.comment__content p').eq(index).text();
        $('.comment__content').eq(index).html('<textarea style="width: 500px; height: 50px; padding: 0px; resize: none;">' + commentEdit + '</textarea>');
        //then it supposed when i press enter key the edit is done
});

非常感谢

Answer 1

您没有以正确的方式使用 .on() 来使其在动态元素上工作。

试试这个。

$('#container-comments').on('click', '.edit', function () {
        var index = $('.edit').index(this);
        var commentEdit = $('.comment__content p').eq(index).text();
        $('.comment__content').eq(index).html('<textarea style="width: 500px; height: 50px; padding: 0px; resize: none;">' + commentEdit + '</textarea>');
        //then it supposed when i press enter key the edit is done
});

结构如下

$('static selector').on('event', 'dynamic selector', function(){...});

否则它将像正常的点击一样工作