Jeditable 元素不响应生成的点击答案

【问题标题】：Jeditable element not responding to generated clickJeditable 元素不响应生成的点击
【发布时间】：2018-08-20 09:55:36
【问题描述】：

我正在尝试使用 jQuery Jeditable 字段旁边的图标。这个想法是用户可以单击电子邮件地址本身或图标，文本将变得可编辑。 目前，如果您点击文本，电子邮件地址将变为可编辑，但如果您点击图标则不能。

<label>
    <input type="radio" name="preview_source" value="email" checked>
    &nbsp;
    <span id="id_preview_email_address_container" class="clickable" style="display: inline;">
        the person
        <span id="id_preview_email_address" class="editable">{{ preview_email }}</span>
        <i class="icon-pencil jeditable-activate clickable"></i>
    </span>
</label>

我正在使用以下函数来监听对铅笔图标的点击，这会在电子邮件地址文本上生成点击事件：

$('.jeditable-activate').click(function () {
    $(this).parent().find('.editable').click(); 
   // I know this is a bit clunky, but this is part of a large and 
   // complicated template system, so I can't easily simplify this 
   // selection without having to edit 20+ other files
});

我添加了一些 console.log() 来检查监听器是否工作；我可以确认单击图标确实会在电子邮件地址文本上生成 click() 事件 - 它只是没有给我输入字段。我试图修改here 建议的一些解决方案，但没有运气。我也尝试过通常的“将其包裹在$(document).ready()”中，但一次没有解决！

【问题讨论】：

尝试触发 $(document).on('click','.jeditable-activate',function(){HERE})等事件

标签： jquery jeditable

【解决方案1】：

<label> 标记的某些内容意味着 jeditable 插件无法按预期工作。对图标的单击正在注册，文本正在输入字段中，但 <label> 元素只是将其再次翻转回文本。不知道为什么单击文本本身会起作用。

为了解决这个问题，我像这样更改了 HTML：

<label>
    <input type="radio" name="preview_source" value="email" checked>
    &nbsp;
    <span id="id_preview_email_address_container" class="clickable">the person with address </span>
</label>
<span id="id_preview_email_address" class="editable">abc@123.com</span>
<i class="icon-pencil jeditable-activate clickable"></i>

【讨论】：