在裝模板的jQuery丟失目標

Question

我必須映射到特定的控制器和視圖特定的路線：

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when('/create', { 
     templateUrl: 'partials/form/form.html', 
     controller: 'TournamentCreateController' 
    }); 
}]); 

在這種form頁我在內的一些泛音，以及：

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

而且這start.html有一個元素如：

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

當我嘗試激活該元素上的JavaScript組件，它完全忽略了它的目標（#time）。我嘗試了以下內容：

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

而當輸入被點擊時，不顯示任何提示。但是，如果我將start.html（部分）中的元素移至包含它的父項，form.html，則jQuery可以正常工作。

這是什麼問題，我該如何解決它？

Answer 1

這看起來像事件綁定的時間問題。將事件綁定更改爲父級中存在的元素，然後將'#time'作爲.on方法調用的第二個（三個）參數。

的。對調用看起來是這樣的：

$('#<replace_with_id_from_parent_page>').on('click', '#time', function(){ alert('Time clicked'); }); 

Answer 2

的問題是，當執行$('#time').on('click', function() { alert('Time clicked'); });start.html DOM還沒有準備好。

您可以使用ng-click來做同樣的事情。

<input id="time" type="text" ng-model="time" ng-click="onTimeClick()"> 

app.controller('TournamentCreateController', function ($scope, $rootScope, service) { 
    $scope.onTimeClick = function() { alert('Time clicked'); }); 
}