Question

Is there a way I can add additional buttons with click event handlers to jeditable (jQuery plugin)? What I want to do is, when you click on some editable element and the input element with “Ok” and “Cancel” buttons show up, I would like to add another button with some text, clicking which should redirect the user to another URL.

Can it be done? Any kind of help is highly appreciated. Thanks a tonne for your time and effort in advance.

Best regards.

Answer 1

I think you could use jQuery’s live() method to add a button after jEditable’s span/input elements were created…
so maybe something like this would work…

$('.editable').live('click', function() {
    // Live handler called.
    // And here's where it gets tricky with jEditable...the jQuery selector below may be all wrong  
    $('.editable').append('<button type="submit" class="gotourl">Go to URL</button>');
});

and then

$('.gotourl').live('click', function(){
    // Place your redirect code here
}

just tried adding another button in the submit setting and that worked OK

submit: '<button type="submit" class="ok">OK</button> <button type="submit" class="gotourl">Go To URL</button>'

so then the live method should fire when you click the Go To URL button…but jEditable will run also…so you’d have to debug it get it work together…