Question

我有这个页面

如果你去那里你会看到产品，左边的每个产品旁边都是一个按钮。单击该按钮，您将获得可用的滚动窗口....

顶部有一个下拉列表，我有一个Jquery加载它，用新内容刷新整个页面...如果你选择任何类型的“快餐”的顶部下拉菜单后再点击更多Pos Station“卷轴不再起作用......我为什么会这样做而失去了

。”

$("#main_content").load("function.php?type="+type+"piz&count=5");

这是用户选择下拉列表时触发的调用

这是切换的代码

    // blue item expand
$('.item-blue .btn-expand').click(function () {

    var btn = $(this);
    $(this).parent().prev().slideToggle(function () {
        btn.toggleClass('btn-expand-h');
    });
    return false;
});

Answer 1

您必须重新绑定处理点击“更多”的事件......

您将其绑定在文档的Load事件上，但是您不是在点击菜单时添加它...

$('.select-big ul li a').click(function () {
    // your code.....

    // asynchronous task wrong way...
    $("#main_content").load("function.php?type="+type+"&count=5");

    // this is the right way...
    $("#main_content").load("function.php?type="+type+"&count=5", function(){
        $('.item-blue .btn-expand').click(function () {
            var btn = $(this);
            $(this).parent().prev().slideToggle(function () {
                btn.toggleClass('btn-expand-h');
            });
            return false;
        });

        // plus any other code you need to run once
        // the data from the server is "served"
    });

    // your code...
});

您在DOM事件发生后向document.load添加新元素。因此，将事件绑定到“更多”链接的事件已经针对“原始”DOM元素运行...

Answer 2

我猜是因为当您重新加载内容时，您不会为正在替换的内容重新绑定事件处理程序。

改变你的：

$("#main_content").load("function.php?type="+type+"piz&count=5");

为：

var successCallback = function(responseText, textStatus, XMLHttpRequest) {
    // rebind your event handlers here
    $('.item-blue .btn-expand').click(function () {
        var btn = $(this);
        $(this).parent().prev().slideToggle(function () {
            btn.toggleClass('btn-expand-h');
        });
        return false;
    });
};

$("#main_content").load("function.php?type="+type+"piz&count=5", successCallback );

好看的网站顺便说一句：）

Answer 3

由于您使用的是jQuery 1.4.x，请查看jQuery的live()方法。它允许您避免在AJAX加载后手动重新绑定。因此，您的代码可以修改为：

$('.item-blue .btn-expand').live('click', function () {
  var btn = $(this);
  $(this).parent().prev().slideToggle(function () {
    btn.toggleClass('btn-expand-h');
  });
  return false;
});

在加载发生后，它会自动重新绑定事件。 live（）从1.3开始就一直在jQuery中。

Jquery一定不能重装

3 个答案: