我的html代码
<div class="gridRowsContainer">
<div ng-repeat="item in ActiveUserData.ListModel track by $index" class="">
<!-- Checkboxes Generated/inserted here by ajax -->
<div class="gridRow pnl-no-dimiss" ng-style="getRowCss(item)" id="user_list_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" style="background-color: transparent;">
<div>
<div class="userLight listViewRow">
<div class="ms-ChoiceField f-choice" data-hint="Users" data-value="SelectItem">
<input id="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-input dataListField ng-valid ng-dirty ng-valid-parse ng-touched" type="checkbox" ng-model="item.isChecked" ng-change="UpdatedSelectedUsers(item)" tabindex="0" aria-checked="false" aria-invalid="false">
</div>
</div>
</div>
</div></div></div>
我的 jQuery 代码
$(":checkbox").change(function() {
$(this).closest('[ng-repeat*="item"]').nextAll('[ng-repeat*="item"]:lt(3)').find('[type="checkbox"]').prop('checked', this.checked);
});
所以当通过ajax加载内容时它不起作用,知道如何在页面加载时通过ajax加载内容时让它工作,并且当用户向下滚动时加载更多复选框条目。
使用静态复选框列表工作 jsfiddle::https://jsfiddle.net/mmzth076/7/ 但不能使用 ajax
最佳答案
尝试在ajax的成功处理程序中添加更改函数:
$.ajax {
method: 'GET',
success: function() {
load_grid(); //Code that builds the grid with the checkboxes
$(":checkbox").change(function() {
$(this).closest('[ng-repeat*="item"]')
.nextAll('[ng-repeat*="item"]:lt(3)')
.find('[type="checkbox"]')
.prop('checked', this.checked);
});
}
}
您还可以使用绑定(bind)点击事件处理程序时 DOM 中可用的任何已知的网格父级。
$('body').on('change', ":checkbox", function () {
$(this).closest('[ng-repeat*="item"]')
.nextAll('[ng-repeat*="item"]:lt(3)')
.find('[type="checkbox"]')
.prop('checked', this.checked);
});
在绑定(bind)时将正文替换为任何已知的前身。
关于javascript - JQuery 更改功能不适用于 ajax 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37870770/