jquery - 如果刷新部分 DOM，我会丢失 jQuery 绑定(bind)吗？

Question

我有以下内容:

<script type="text/javascript">
      $(document).ready(function () {
          $("input[id^='Position_'], select[id^='Level_'], input[id^='Title_'], select[id^='Status_'],").change(function (e) {
              var type = $(this).attr('id').split('_')[0];
              updateField('Menu', $(this), type);
          });
      });
   </script>

这很好用。不过，我使用 Ajax 使用新的 HTMl、相同的字段和 ID 名称来刷新页面区域，但只是以不同的顺序排序数据。

$.ajax({
    url: "/Administration/" + entity + "s/Detail2",
    data: { pk: pk },
    dataType: 'html',
    cache: false,
    success: function (responseText) {
        $('#detailData').html(responseText);
    }
});

刷新后，函数 updateField 不会被调用。

这是预期的行为还是我在其他领域犯了一些错误。

还有。我正在使用 IE 进行调试。有没有一种方法可以让我看到 updateField 绑定(bind)到元素的绑定(bind)？

Answer 1

根据您的示例，当您更改容器的 html() 时，附加到这些元素的所有事件也将被删除。

为了防止这种情况发生，请在容器上使用 delegate() (如果您使用的是 1.7+，则使用 on())来检查其中的元素。不要使用 live()，因为它已被弃用并且性能较差。

<script type="text/javascript">
    $(document).ready(function () {
        $("#detailData").delegate("input[id^='Position_'], select[id^='Level_'], input[id^='Title_'], select[id^='Status_'],", "change", function (e) {
            var type = $(this).attr('id').split('_')[0];
            updateField('Menu', $(this), type);
        });
    });
</script>