jquery - Jeditable - Activate edit of X by clicking on Y

Question

I'm trying to use Jeditable as an inline editing solution.

The default behavior (click on the element to edit it) works quite well, but I would like to activate an element by clicking on another element.

For example clicking on a.activateEdit will activate the next div.edit (obviously should be done using jQuery selectors).

I've looked into Jeditable docs for this, but couldn't find the right syntax

FYI, the default Jeditable syntax is something along the lines of:

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php');
 });

*Edit: found a better solution *

Answer 1

Above code is not quite correct either. It triggers click event on ALL Jeditable instances.

There are many ways to do it and it all depends on your HTML, but for example if you have following HTML:

<div class="edit" id="unique_id">Editable text</div> 
<a href="#" class="edit_trigger">Edit me!!</a>

Then you can use following JavaScript:

/* Bind Jeditable instances to "edit" event. */
$(".edit").editable("http://www.example.com/save.php", {
    event     : "edit"
});
/* Find and trigger "edit" event on correct Jeditable instance. */
$(".edit_trigger").bind("click", function() {
    $(this).prev().trigger("edit");
});