Question

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

我还有一些下拉框，用户可以使用它们来进一步过滤结果。一个下拉框包含品牌的主要类别（梅赛德斯，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 =选择，第二个框有一个id = selectionresult

提前致谢！

Answer 1

听起来.html()调用会清除先前绑定的click事件处理程序。使用.live()或.delegate()代替.click()。变化

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

到

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

这样做会将事件侦听器绑定在DOM树的更高位置，因此$("#selection").html()调用不会使侦听器被删除。

Answer 2

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

查看jquery.delegate()

Answer 3

尝试使用

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

分页后，JQuery函数不再起作用

3 个答案: