After jquery load html need to use jeditable onclick

Question

I have code like this, and it's almost working for me. html code:

<div id="template_header">
    <span id="event_title">
        <h3 id="event_title_text">{$event.title}</h3>
    </span>
</div>

Which is loaded with jquery script like this:

$(document).ready(function(){
    $('#user_template').load('some_url');
});

and now I want to use jeditable for that loaded content like this:

javascript code:

$(document).on('click', '#event_title', function(){
    $('#event_title_text').editable('save_data_url', {
        indicator : 'Saving...',
        cancel    : 'Cancel',
        submit    : 'OK',
        tooltip   : 'Click to edit...'
    });
})

and it's almost working.. just I need to press two time on the div#event_title_text that it would open jeditable input/boxes and so on..

I need that I could open it on the first click on that div.

Answer 1

You need to use a callback function like this:

$(document).ready(function(){
    $('#user_template').load('some_url', function(){
        $(document).on('click', '#event_title', function(){
           $('#event_title_text').editable('save_data_url', {
               indicator : 'Saving...',
               cancel    : 'Cancel',
               submit    : 'OK',
               tooltip   : 'Click to edit...'
           });
        });
    });
});

Answer 2

Try this, it would make items editable onload, for one-click:

$(document).ready(function(){
    $('#user_template').load('some_url');

   $('#event_title_text').editable('save_data_url', {
    indicator : 'Saving...',
    cancel    : 'Cancel',
    submit    : 'OK',
    tooltip   : 'Click to edit...'
  });
});