3

我正在使用以下内容。这不适用于动态创建的元素。我使用的是 jQuery 1.4.2

 $(".wrapper1").live("scroll",function(){
     alert(123);
    $(".wrapper2")
    .scrollLeft($(".wrapper1").scrollLeft());
  });

这也不适用于普通元素。（在页面加载时加载）

这里可能是什么原因。请帮助我。在此先感谢....

4

3 回答 3

7

浏览器发生变化，jQuery 错误得到修复，这就是为什么始终使用最新版本的 jQuery 很重要的两个原因（经过适当的测试，您不能只指向最新版本）。

您的代码适用于 jQuery 1.9，对于另一种事件类型，

$(document).on("event_type",".wrapper1", function(){
    $(".wrapper2")
        .scrollLeft($(".wrapper1").scrollLeft());
});

使用$(document)而不是作为接收者的原因$(".wrapper1")是只有在绑定时存在的元素才能接收和委托事件。on不像旧的那样工作live。

除了这不适用于scroll事件，因为它们不会冒泡。

所以我能提出的最合理的解决方案是定义一个函数：

$.fn.bindScrollHandler1 = function(){
    $(this).on('scroll', function(){
       $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
    });
}

并在开始时调用它：

$('.wrapper1').bindScrollHandler1();

并且每次创建一个新的 .wrapper1 元素时：

myNewElement.bindScrollHandler1();

示范

请注意，您的完整逻辑似乎有点缺乏，因为您没有配对滚动条，而是让它们都工作相同。

于 2013-04-17T10:21:26.767 回答
2

我知道你解决了你的问题（或者你认为你解决了它），但是如果你有一些问题，你应该知道：

事件处理程序仅绑定到当前选定的元素；当您的代码调用.on().

这是来自jQuery 文档。

该功能有两种使用.on()方法：

  1. $('selector').on('event', function () { body of the handler });

    事件处理程序直接附加到匹配的元素。因为它是强制完成的，所以选择器被解析并且所有匹配的元素都得到一个附加的事件处理程序。例如，它与调用相同$('.asdf').click()。

  2. $('selector1').on('event', 'selector2', function () { handler });

    如您所见，有 2 个选择器：事件处理程序将附加到选择器 1，但它将处理在选择器 2 上触发的事件！这很像.live()or .delegate()，（实际上完全一样）。

    它的作用是.live()将事件处理程序附加到'document'，并处理选择器匹配的元素的事件（与 相同$('document').on('event', 'selector', function() {});）。

    这样做的好处是事件处理程序附加到已经存在的元素上，并且能够通过事件冒泡处理动态创建的元素的事件。

    所以在你的情况下，第二种语法似乎是你需要的。

编辑：我不知道有一个大问题：滚动元素没有冒泡。有解决方法，但我现在没有时间编写解决方案。让我回去吧，当我大约几个小时后回来的时候。或者如果dystroy的解决方案有效，请不要犹豫接受它。

于 2013-04-17T10:42:57.183 回答
0

在我的应用程序中，我有一个按钮，每次单击按钮时都会将表单字段集附加到正文 - 我想将页面向下滚动到新元素，但由于明显的原因（冒泡等），这不起作用。我想出了一个简单的解决方法...

function scroll(pixels){
    $('html, body').animate({
        scrollTop: pixels
    }, 1000);
};

function addObservation(x){
    $('body').append(x);
    newFieldSet = $('fieldset').last();
    pixelsFromTop = newFieldSet.offset().top;
    scroll(pixelsFromTop);
};

$(document).on("click", "#add_observation", function(){
    addObservation("<fieldset>SOME FORM FIELDS HERE</fieldset>");
});

因此，每次添加字段集时，.offset().top测量该字段集距顶部的像素数，然后滚动窗口该距离。在您的情况下，您可以执行pixelsFromLeft = newFieldSet.offset().left并替换scrollTop为scrollLeft, 或类似的东西。

于 2016-08-10T15:18:48.110 回答