javascript - jQuery missing targets in loaded templates -

i have particular route mapped particular controller , view:

app.config(['$routeprovider', function ($routeprovider) {   $routeprovider     .when('/create', {       templateurl: 'partials/form/form.html',       controller: 'tournamentcreatecontroller'     }); }]); 

in form page including partials well:

<div ng-include="'partials/form/start.html'"></div> 

and start.html has element like:

<input id="time" type="text" ng-model="time"> 

when try activating javascript components on element, it's ignoring target (#time). tried following:

app.controller('tournamentcreatecontroller', function ($scope, $rootscope, service) {   $('#time').on('click', function () { alert('time clicked'); }); } 

and when input being clicked no alert shown. if move element start.html (the partial) parent being that's including it, form.html, jquery working properly.

what's issue , how can solve it?

the issue start.html dom not ready when $('#time').on('click', function () { alert('time clicked'); }); executed.

you can use ng-click same.

<input id="time" type="text" ng-model="time" ng-click="ontimeclick()">  app.controller('tournamentcreatecontroller', function ($scope, $rootscope, service) {   $scope.ontimeclick = function () { alert('time clicked'); }); }