Run JS function on .load() content

Question

I have a function called timepicker which is usually called by using

$(document).ready(function() {
 $('#timepicker').timepicker();
});

But I have been unable to make it work on content that is displayed using jQuery .load().

I have tried several methods including using the below but nothing happens?

$(document).ready(function() {
 var $parent = $('#small_container');
 var time = $parent.find('#timepicker');
 time.timepicker();
});

The #small_container is the ID of the DIV that the content is loaded into and the #timepicker is the id of the input that should call the function when it is clicked on.

Have I added it to the correct place in the callback?

$('.edit_job').on("click", function(){
 var week_start = $('input[name=week_start]').val();
 var job_id_del= $('input[name=job_id]').val();
 var user_id = $('input[name=user_id]').val();
 $('#small_container').load('ajax/edit_weekly_job_load.php?job_id='+job_id_del+'&week_start='+week_start+"&user="+user_id);
 $('#timepicker').timepicker();
 $('#small_container').on("click", '#edit_job_submit', function(){
 jQuery.ajax({
 type: "POST",
 url: "ajax/edit_weekly_job_ajax.php",
 dataType: "json",
 data: $('#edit_job_form').serialize(),
 success: function(response){
 if(response.success === 'success'){
 window.opener.$("#diary").load("ajax/diary_weekly_load.php?week_start="+week_start+"&user="+user_id);
 window.close();
 }
 },
 });//end ajax
 });//save_job_edit_submit
});//end edit job

• Satpal: Can you elaborate The #small_container is the ID of the DIV that the content is loaded into and the #timepicker
• DBS: If you are adding the element to the dom with the .load then you should add the .timepicker() in the callback function.
• David Nguyen: Where is your load function? Should be able to call $('#timepicker').timepicker(); as part of the load function.
• devnull69: You should call $('#timepicker').timepicker() after the dynamic content loaded, so in the callback of your ajax .load()
• tatty27: @Satpal #small_container is the element that the the content using.load() is loaded into.

Answer 1

The content is loaded asynchronously to the element #small_container. The timepicker function is gets called before the content is actually loaded. Try to call the function in the callback of load() method: $('#small_container').load('ajax/edit_weekly_job_load.php?job_id='+job_id_del+'&week_start='+week_start+"&user="+user_id ,function(){ $('#timepicker').timepicker(); } );

Also validate that element #timepicker is actually appended to the element #small_container.

• tatty27: thanks but it is a different plugin (didn't realise there were more than one with the same name). The one I am using is fgelinas.com/code/timepicker
• Rahul Malu: Please check the following dependencies are present as per the link you shared: jQuery (tested with version up to 1.9.0) jQuery UI Core (included in jquery-ui-x.x.x.custom.min.js, tested with version 1.10.0) jQuery UI Position utility (optional for special position of the dialog) jQuery UI Theme.css (included in jquery-ui-x.x.x.custom.css) jquery.ui.timepicker.js jquery.ui.timepicker.css
• tatty27: all of the dependencies are there, I have it working on another page that has no dynamic content using the same files