I am trying to use an icon next to a jQuery Jeditable field. The idea is that the user can click on either the email address itself, or the icon, and the text will become editable. Currently, the email address becomes editable if you click on the text, but not if you click on the icon.
<label>
<input type="radio" name="preview_source" value="email" checked>
<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>
I am using the following function to listen for the click on the pencil icon, which generates a click event on the email address text:
$('.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
});
I added some console.log()s to check that the listener was working; I can confirm that clicking on the icon definitely does generate the click() event on the email address text - it's just not giving me the input field. I've attempted to modify a few of the solutions suggested here but with no luck. I've also tried the usual 'wrap it in a $(document).ready()
' but for once it's not solved it!
Something about the <label>
tag means the jeditable plugin doesn't work as expected. The click on the icon is registering, the text is being made into an input field, but the <label>
element just flipped it right back to text again. No idea why clicking on the text itself worked though.
To fix this, I changed the HTML like so:
<label>
<input type="radio" name="preview_source" value="email" checked>
<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>