Question

I have the following:

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

This works fine. However I use Ajax to refresh an area of the page with new HTMl, same field and id names but just data sorted in a different order.

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

After this refresh the function updateField doesn’t get called.

Is this expected behaviour or am I making some mistakes in another area.

Also. I am using IE for my debug. Is there a way I can see bindings such as these where the updateField is bound to elements?

Answer 1

Given your example, as you are changing the html() of the container, then all the events attached to those elements will be removed too.

To prevent this, use delegate() (or on() if you are using 1.7+) on the container to check the elements inside it. Don’t use live() as it has been deprecated and has poor performance.

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