在Ajax生成的页面上选择和jQuery定位

Question

我在AJAX生成的页面上有一个Select框，就像这样

<select onchange="setLocation(this.value)">
   <option value="https://xy.com/accessories.html?dir=asc&amp;limit=15&amp;order=name">Name</option>
   <option value="https://xy.com/accessories.html?dir=asc&amp;limit=15&amp;order=price" selected="selected">Price</option>
 </select>

我想制作一个jQuery代码，当select更改时会滚动回页面顶部（但当然也要执行默认的javascript函数）。我尝试过这个脚本，但它似乎没有用。

jQuery("body").on( "change", ".sort-by select, .limiter select", function(){
  jQuery("html, body").animate({ scrollTop: 0 }, "slow");
});

知道如何解决这个问题吗？

Answer 1

您希望在select元素本身（而不是正文）上添加更改侦听器。必须在通过ajax调用将其加载到DOM后完成。

$('.sort-by select, .limiter select').on('change', function() { /* your code here */ });

理想情况下，您的选择器足够精确，只能定位Ajax调用已插入DOM中的新元素中的选择框。