JQuery 更改功能不适用于 ajax 内容答案

【问题标题】：JQuery Change function not work with ajax contentJQuery 更改功能不适用于 ajax 内容
【发布时间】：2016-06-16 23:04:29
【问题描述】：

我的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 响应而创建的？如果是这种情况，您将需要在元素被创建并在 DOM 中可用后绑定更改
您的 jquery 代码可能会在文档就绪处理程序中执行一次，因此它会找到当时可用的所有复选框并为它们配置更改事件处理程序。关于在 ajax 调用中获得的 html，您可能会在某个时刻将其插入 DOM。这也是为该新 html 设置更改事件处理程序的好时机。
你能告诉我如何绑定复选框更改功能
只需将您的 jquery 代码视为设置代码，而不是将其视为自动应用于现在存在和将来出现的所有 html 代码的声明。
你是如何尝试实现你的 AJAX 调用的？

标签： javascript jquery

【解决方案1】：

尝试在 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);
    });
  }
}

您还可以使用绑定单击事件处理程序时 DOM 中可用的任何已知网格父级。

$('body').on('change', ":checkbox", function () {
    $(this).closest('[ng-repeat*="item"]')
        .nextAll('[ng-repeat*="item"]:lt(3)')
        .find('[type="checkbox"]')
        .prop('checked', this.checked);
});

在绑定时将正文替换为任何已知的前任。

【讨论】：

我无法访问网页的 ajax 功能，因为我正在为 Office 365 编写此脚本
刚刚更新了我的答案以在绑定时使用已知的 DOM 元素。

【解决方案2】：

当您通过 ajax 加载包含时，它不会触发 changed 事件。如果要触发，只需使用jquery，手动触发事件即可。

$('checkboxyouwanttotrigger').trigger('change')

【讨论】：