Javascript 按钮单击只工作一次_Javascript_Jquery_Html

Javascript 按钮单击只工作一次

javascript jquery html

Javascript 按钮单击只工作一次,javascript,jquery,html,Javascript,Jquery,Html,我有一个按钮，点击后在“ForPassentials”div的末尾添加一个新的输入元素，但它只工作一次。一次点击后，它就不再是可点击的了控制器： app .controller('multipleFlightsController', function ($scope, $http, $location) { $scope.addPassenger = function () { document.getElementById('forPassengers')

我有一个按钮，点击后在“ForPassentials”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*/

<div id="forPassengers" class="col-lg-2 form-group">
    <label># of other passengers</label>
    <button id="buttonForPassenger" type="button" class="btnBlue" ng-click="addPassenger()">Add passenger</button>
    <input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
    <input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
 </div>

app
.controller（'multipleFlightsController'，函数（$scope、$http、$location）{
$scope.addPassenger=函数（）{
document.getElementById（'用于乘客'）
.innerHTML+=''；
};
/*……更多代码*/

HTML:

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*/

<div id="forPassengers" class="col-lg-2 form-group">
    <label># of other passengers</label>
    <button id="buttonForPassenger" type="button" class="btnBlue" ng-click="addPassenger()">Add passenger</button>
    <input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
    <input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
 </div>


#其他乘客
增加乘客

工作解决方案（编辑） 最终解决我问题的方法是使用AngularJS，而不是通过document.getElementById函数访问输入元素。

使用$scope：

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

然后用ng重复：

<!-- 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">

它之所以能工作一次，是因为angularJS在幕后发挥了相当大的魔力。通过覆盖对象的innerHTML，可以从子节点中删除angularJS的绑定

按照建议使用ng重复

 $scope.people = [];
 $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"> ';
   $scope.people.push({name:"person" + counter});

   counter= counter + 1;
};


<body ng-controller="MainCtrl">
<div id="forPassengers" class="col-lg-2 form-group">
<label># of other passengers</label>
<button id="buttonForPassenger" type="button" class="btnBlue" ng-click="addPassenger()">Add passenger</button>
<input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
<input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
<input ng-repeat="person in people" class="form-control airport ng-pristine ng-untouched ng-valid" type="text" placeholder="#" tabindex="0" aria-invalid="false" ng-model="person.name">

$scope.people=[]；
$scope.addPassenger=函数（）{
//document.getElementById（'ForPassentials'）。innerHTML+=''；
$scope.people.push（{name:“person”+counter}）；
计数器=计数器+1；
};
#其他乘客
增加乘客

Angular提供了一套非常好的工具来控制视图合成和模板： ng重复 ng秀兽皮 ng如果

尽量避免自己修复DOM。

控制器可能未分配到

div

中。id为的元素在哪里forPassengers@HappyCoding我怎么检查？