Question

下面的过滤机制（item_filter）通过ajax函数（load_resorts）返回新的html-content（product_data）。在这个新加载的html内容中（也是）一个类 - 当点击时 - 应该触发一个函数（通过类myresort）。

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

myresort click功能适用于默认加载的度假（在页面加载时），但不适用于通过ajax加载的。我使用了绑定功能。

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事件委托问题：你需要将jquery绑定到动态创建的元素（使用ajax），当页面准备好时，这些元素不在DOM上。为此，请更改您的代码：

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

它应该适用于所有人。

有关详细信息，请check this出来。

绑定点击功能不能在ajax内容刷新上工作

1 个答案: