jQuery edit in place plugin that allows you to trigger editing from another element

Question

Right now I'm using Jeditable for edit-in-place functionality. Jeditable has some nice options, but (as far as I know), it doesn't allow you to trigger editing except by clicking the element in question.

I.e., suppose my element has id comment. With Jeditable, the only way to start editing is to click comment. What I'd like is to put some small text next to comment (e.g., "Click to edit your comment") that, when clicked, will turn comment into an editable text field (and set up Save and Cancel buttons, etc).

Answer 1

Check out jQuery's trigger method.

Use code like:

$('#id-for-text').click(function(){
  $('#comment').trigger('click');
});

Answer 2

Based on your comments above you could do this:

var editFn = (function(){ return $('#comment').click; })();
$('#id-for-text').click(editFn);
$('#comment').unbind('click');

This tells the label that the click event should be the same as the comment click event, then unbinds the event on the comment.

Not sure if unbind will destroy the reference to the editFn hence have included the closure.

Answer 3

Okay, I cracked the case. In this blog post, the author writes

You can now use any custom event for triggering Jeditable.

$(".editable").editable("http://www.example.com/save.php", { 
   event     : "make_editable" 
});

So I did this and then did:

  $("#id-for-text").click(function() {
    $("#comment").trigger('make_editable');
  });