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绑定到元素？

Answer 1

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

要防止出现这种情况，请在容器上使用delegate()（或on()，如果您使用的是1.7+）来检查其中的元素。不要使用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>

Answer 2

我认为尽管id仍然相同，但它们是新添加的HTML元素，没有事件绑定到它们。所以这是预期的行为要将Jquery事件绑定到新添加的元素，请使用.live()或.on() PS： .live()在Jquery 1.7中已弃用。

修改
在Jquery中绑定事件时使用.live()，如

$("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); });

Answer 3

默认情况下，您将丢失绑定，但有一些技术可以让您拥有与新内容相关联的绑定... http://api.jquery.com/live/

如果刷新部分DOM，我会丢失我的jQuery绑定吗？

3 个答案: