JavaScript/jQuery doesn't work on Editor/Display templates loaded with Ajax

Question

I created editor and display templates for my entire object downline.

Now one of the inner objects' text boxes should be a date-picker.

The thing is it's loaded after the initial loading using Ajax, and the included scripts don't work.

I tried to include the following script on the bottom of the template, the script renders but does nothing:

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquerytimepicker")

<script type="text/javascript">
  alert('dddddddddddddddddddddddddd');
  $('.time-picker').timepicker();
</script>

In the code abve I also added a dummy alert just to prove that the script isn't running, which makes the question much simpler: "How to run scripts from templates and partial views?".

I tried to include the scripts in a section define in the outer page, but that doesn't work, as templates and partial view cannot include sections by design (Read this).

Answer 1

it doesn't work because the js that attaches the timepicker to the html runs at document.ready, but the content loaded via ajax is loaded after document.ready

so you need to call the method that attaches the timepicker again after the ajax request has completed

you can try this:

$(document).ajaxComplete(function(event, xhr, settings) {
    alert('an ajax request completed');
    $('.time-picker').timepicker();
});