分页后JQuery功能不再起作用

Question

我正在为我的网站使用 CodeIgniter。在一页上，我展示了不同的车辆。用户可以通过分页浏览所有结果。

我还有一些下拉框，用户可以使用它们来进一步过滤结果。一个下拉框包含品牌的主要类别（Mercedes、DAF、...）

第二个下拉框包含车辆类型。对于这个盒子，我创建了一个 JQuery 函数，它根据在第一个框中选择的品牌更新盒子的内容。当我单击分页链接转到下一页时，这不再起作用。我想这与函数是在就绪部分创建的事实有关。有人可以帮忙吗？

JQuery 代码：

<script type="text/javascript">
function updateTypes(){
    $.ajax({
        type: "POST",
        data: "merk_id=" + $('#selection').val()  + "&voertuig=" + $('#voertuig').val(),
        url: "dropdown",
        success: function(msg){
            if (msg != ''){
                $("#selectionresult").html(msg).show();

            }
        }
    });
}


    $("#selection").change(updateTypes);


    // Update types when entering the second box with the mouse
    $("#selectionresult").mouseenter(updateTypes);

第一个框的 id=selection，第二个框的 id=selectionresult

提前致谢！

Answer 1

尝试使用

$('body').delegate('#selection', 'propertychange change', function(){ 
  updateTypes();
}); 

Answer 2

分页时是否会重新呈现选择项？如果是这样，您需要一种方法来再次绑定 .change() 和 .mouseenter() 事件，因为原始对象不再存在。

看看jquery.delegate()

Answer 3

听起来.html() 调用清除了先前绑定的click 事件处理程序。使用.live() 或.delegate() 而不是.click()。改变

$("#selection").change(updateTypes);

到

$("#selection").live('change', updateTypes);
// or
$('some ancestor of #selection').delegate('#selection', 'change', updateTypes);

这样做会将事件侦听器绑定到 DOM 树的更高层，因此侦听器不会被 $("#selection").html() 调用所清除。