按钮单击仅适用一次(Button click only works once)

按钮单击仅适用一次(Button click only works once)

我有一个按钮，一旦点击它就会在“forPassengers”div的末尾添加一个新的输入元素，但它只能工作一次。 点击一下就不再可以点击了。

控制器：

app .controller('multipleFlightsController', function ($scope, $http, $location) { $scope.addPassenger = function () { document.getElementById('forPassengers') .innerHTML += '<input class="form-control airport ng-pristine ng-untouched ng-valid" type="text" ng-model="additionalPassengers" placeholder="#" tabindex="0" aria-invalid="false"> '; }; /*..... more code*/

工作解决方案（编辑）

最终解决了我的问题的是实际使用AngularJS而不是通过document.getElementById函数访问input元素。

I have a button which appends a new input element to the end of the "forPassengers" div once it's clicked, but it only works once. After one click it's not clickable anymore.

Controller:

app .controller('multipleFlightsController', function ($scope, $http, $location) { $scope.addPassenger = function () { document.getElementById('forPassengers') .innerHTML += '<input class="form-control airport ng-pristine ng-untouched ng-valid" type="text" ng-model="additionalPassengers" placeholder="#" tabindex="0" aria-invalid="false"> '; }; /*..... more code*/

WORKING SOLUTION (edit)

Eventually what solved my problem was actually using AngularJS instead of accessing the input element through the document.getElementById function.

最满意答案

使用您的$ scope：

$scope.passengers = []; $scope.addPassenger = function () { $scope.passengers.push({}); };

然后使用ng-repeat：

<!-- use ng-repeat... --> <input ng-repeat="passenger in passengers" class="form-control airport ng-pristine ng-untouched ng-valid" type="text" ng-model="additionalPassengers" placeholder="#" tabindex="0" aria-invalid="false">

Use your $scope:

$scope.passengers = []; $scope.addPassenger = function () { $scope.passengers.push({}); };

and then with ng-repeat:

<!-- use ng-repeat... --> <input ng-repeat="passenger in passengers" class="form-control airport ng-pristine ng-untouched ng-valid" type="text" ng-model="additionalPassengers" placeholder="#" tabindex="0" aria-invalid="false">