Jeditable 不适用于动态添加的元素（ajax）答案

【问题标题】：Jeditable not working with dynamically added element (ajax)Jeditable 不适用于动态添加的元素（ajax）
【发布时间】：2016-03-14 11:39:05
【问题描述】：

我正在使用jeditable 编辑answers 的question
我已经成功实现了整个逻辑，期望通过 ajax 添加到 dom 中的新答案。
最初新添加的 dom 不可编辑，但在遵循一些解决方案后它开始部分工作。

下面是我的代码sn-ps

$('.answer-section').delegate('.answer-descp', 'edit', function(){
    $(this).editable('/answer/update', {
        type    : 'textarea',
        event   : 'edit',
      }
    });
});

触发edit事件编辑内容的链接（也是动态添加的dom的一部分）

$('.answer-section').on('click', '.editans', function(e){
    e.preventDefault(e);
    $(this).parent().parent().prev().trigger('edit');
});

answer-section 是 div 的类，其中包含所有答案，动态添加的新 dom 会在其中添加。
answer-descp 是 div 的类，其中包含必须由 @ 编辑的文本987654332@.
当我们发布新答案（通过 ajax）时，新的 dom 添加了包含答案文本的 answer-descp div 和一个带有 editans 类的新链接，单击时编辑这个新添加的答案

我的问题是我必须单击编辑链接 2 次才能使其可编辑。我尝试了很多变化，但没有成功。在此先感谢

【问题讨论】：

还有其他.answer-section吗？检查e.preventDefault(e); 是否没有阻止$(this).parent().parent().prev().trigger('edit'); 为什么要使用它？
这样我只能通过点击编辑链接来编辑答案。
你可以用CSS模拟<a href></a>标签，这样你就可以避免它的默认行为......检查event.stopPropagation()，它在这种情况下也很有用......
问题是为什么在第二次点击时触发事件？

标签： jquery ajax dom jeditable

【解决方案1】：

旧线程，但我遇到了同样的问题，并且对这些未回答的问题感到恼火。最终答案如此明确，但也许这样可以节省一些奇怪的时间。

第一次单击将可编辑事件添加到第二次触发它的元素。

添加可编辑内容不需要点击事件，它会通过自己的广告来触发它。

对我来说，将.editable() 添加到模态后直接调用它是有效的即

$('#someID').contextmenu(function (e) {
    e.preventDefault();
    $('.someClass').modal('<span class="editable">'+someVal+'</span>'));
    $('.editable').editable('some/URL/'); 
}

对于 ajax，这可能应该在 success 部分完成。

【讨论】：