如何使用jQuery编辑新生成的代码？

我正在处理我自己的项目，我对一个新的动态生成节点有一个小问题，它没有单击此处是代码示例：

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>

$('#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
});

8小时前
编辑
太好了！祝销售好运

jQuery:

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

$('#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
});

$（“#注释提交输入[type=submit]”）。单击（函数（e）{
e、 预防默认值（）；
updateComments（params）；//此函数通过添加
//新li包含相同的html结构
});
//它不适用于新生成的
$（'.edit'）。在（'click'，函数（）{
var index=$（'.edit'）.index（此）；
var commentEdit=$（'.comment_ucontent p'）.eq（index.text（）；
$（'.comment\uu content'）.eq（index.html（''+commentEdit+''）；
//然后它假设当我按下回车键时，编辑就完成了
});

非常感谢

试试：

$(document).ready(function(){
    $(document).on('click','.edit',function(){
       // your function
    });
});

---

您没有以正确的方式使用

.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
});

另一方面，它将像普通的

单击一样工作
使用委派：

$('#container-comments').undelegate('.edit', 'click').delegate('.edit', 'click', function() {
     ...
     ...
}

非常感谢你救了我一天