Jeditable 元素不响应生成的点击

Question

我正在尝试使用 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 但没有成功。我也尝试过通常的'wrap it in a $(document).ready()'但是一次没有解决它！

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

Jeditable 元素不响应生成的点击

Jeditable element not responding to generated click

jquery

jeditable