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解决方案，但是没有运气。我还尝试了通常的“将其包装在$(document).ready()中”，但是有一次它没有解决！

Answer 1

关于<label>标记的问题意味着可编辑插件无法正常工作。单击图标即注册，将文本输入到输入字段中，但是<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>

可编辑元素未响应生成的点击

1 个答案: