javascript - 绑定(bind)点击功能不适用于ajax内容刷新

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

下面的过滤机制 (item_filter) 通过 ajax 函数 (load_resorts) 返回新鲜的 html 内容 (product_data)。在这个新加载的 html 内容中，(也是)一个类，当单击时，应该触发一个函数(通过类 myresort)。

<span class="myresort badge" data-src="549">+add</span>

myresort 点击功能适用于默认加载的度假村(页面加载时)，但不适用于通过 ajax 加载的度假村。我使用了绑定(bind)函数。

http://skiweather.eu/wheretoski/

$('.item_filter').on('click', function(event) {
  $('.product-data').html('<div id="loaderpro" style="" ></div>');
  sure = multiple_values('sure');
  country = multiple_values('country');
  altitude = multiple_values('altitude');
  level = multiple_values('level');
  size = multiple_values('size');
  price = multiple_values('price');
  offpiste = multiple_values('offpiste');
  family = multiple_values('family');
  apresski = multiple_values('apresski');
  load_resorts($("#snow1").val(), $("#snow2").val());
});

function load_resorts(ssnow, esnow) {
  $.ajax({
    url: "ajax.php",
    type: 'post',
    data:{sure:sure,country:country,altitude:altitude,level:level,offpiste:offpiste,family:family,apresski:apresski,size:size,price:price,ssnow:ssnow,esnow:esnow,filter_order:filter_order},
    success: function(result) {
      $('.product-data').fadeIn('slow').html(result);
    }
  });
}

$('span.myresort').on('click', function(event) {
  var myres = $(this).attr('data-src');
  $.ajax({
    type: 'POST',
    url: '/v4/ajax/myresorts.php',
    data: {
      myresort: myres
    },
    success: function(msg) {
      $('#myresorts').fadeOut(800, function() {
        if ($('*[data-src="' + myres + '"]').hasClass('loveit')) {
          $('*[data-src="' + myres + '"]').removeClass('loveit');
          $('*[data-src="' + myres + '"]').html('+add').fadeIn().delay(1000);
        } else {
          $('*[data-src="' + myres + '"]').addClass('loveit');
          $('*[data-src="' + myres + '"]').html('-remove').fadeIn().delay(1000);
        }
        $('#myresorts').html(msg).fadeIn().delay(1500);

      });
    }
  });
});

Answer 1

这可能是 jquery 事件委托(delegate)问题:您需要将 jquery 绑定(bind)到动态创建的元素(使用 ajax)，这些元素在页面准备就绪时不在 DOM 上。为此，请像这样更改代码:

$(document).on('click', 'span.myresort', function(event) {

它应该对所有人都有效。

了解更多详情请check this出来。