Question

问题：

我用以下内容替换div的内容：

$('#cita').delay(2000).fadeTo(9000, 1)
$('#cita').delay(6500).fadeTo(2000, 0).queue(function(next) {
$(this).replaceWith('<div class="page-scroll col-sm-12"><a href="#one" class="page-scroll btn btn-primary btn-xl">Find out what confuses me</a></div>');
next();
}).delay("200").fadeIn("2000");

但是，当我单击新创建元素中的链接时，page-scroll类的行为不符合预期（没有平滑过渡到该部分）。

对于那些不熟悉Bootstrap的人来说，类页面滚动仅用于在js中建立依赖关系，因为我从未在任何Bootstrap主题或框架本身中看到过这个类。如果单击具有此类的元素，则会发生以下情况：

$('a.page-scroll').bind('click', function(event) {
    var $ele = $(this);
    $('html, body').stop().animate({
        scrollTop: ($($ele.attr('href')).offset().top - 60)
    }, 1450, 'easeInOutExpo');
    event.preventDefault();
});

库或类依赖的问题？：

我几乎100％确定它不是jQuery或其他库的问题，因为它可以与其他链接一起使用。

在过去，我遇到了类似的问题，我通过不将页面滚动类赋予元素本身来解决它，而不是它的父元素。在这里我尝试了相同的（不仅与它的父母，但也与“爷爷”），但它似乎不是一个好的解决方案。

我还更改了$('a.page-scroll') $('.page-scroll')以使事件100％依赖于类，而不是类+标记。它既不起作用也不起作用。

演示：

jsfiddle

你必须等待报价淡出。将出现新元素“找出让我困惑的东西”，您可以自己测试它。如果单击其他链接，您将看到类page-scroll的链接正常工作。

Answer 1

您将自己的功能绑定到a.page-scroll但是删除该元素并在其中添加新功能。新的将不再具有那种约束力。

将您的功能更改为：

$(document).on('click','a.page-scroll', function(event) {
    var $ele = $(this);
    $('html, body').stop().animate({
        scrollTop: ($($ele.attr('href')).offset().top - 60)
    }, 1450, 'easeInOutExpo');
    event.preventDefault();
});

注意 document应该是一个更接近DOM层次结构中目标元素的元素，就像父容器一样，但要确保你在那里使用的任何元素都是一个静态元素它存在于页面加载中，不会在任何时候删除

为获得最佳效果：

如果您的元素是静态的（它们存在于页面加载中并且未被删除并在以后重新添加 OR 它们会在调用绑定函数之前添加到页面中），那么您应该将它们作为特定目标尽可能

$('#some-element').click(function(){
});

如果您的元素是动态的（在页面加载后删除，并在此后添加回来，就像您的情况一样），您应该定位目标最近的静态父级，如

$('#closest-static-parent').on('click', '#some-element', function(){
});

如果您不确定最接近的静态父母将会是什么，下面的内容总是有效，但由于性能不佳，您不应该一直使用它：

$(document).on('click', '#some-element', function(){
});

.on()的想法是，您将函数绑定到页面上始终存在的元素，并且绑定侦听绑定元素后代的点击。当它＆＃34;听到＆＃34;单击后代，它会检查后代是否与提供的选择器匹配（在本例中为#some-element），如果匹配，则调用该函数。

绑定元素距离DOM中的目标元素越远，检查发生的次数越多，您的函数性能就越差。更接近的绑定元素是DOM中的目标元素，更少的检查发生，您的功能变得更加高效。

如果你绑定到document，只要你点击页面上的任何地方，该函数就会检查被点击的元素是否有提供的选择器（这将是很多检查）。

但是，如果绑定到目标的静态父元素，则只有在单击绑定元素的子元素时才会执行检查。

为了完整性

您还可以在将新元素添加到页面后重新绑定该函数，如：

$('#some-element').bind('click', function(event) { // function bound to existing element
    alert('works');
});
$('#some-element').remove(); // remove the element 
$('#some-parent').append('<div id="some-element">'); // add the element back (will no longer have the function bound to it)

$('#some-element').bind('click', function(event) { // re-bind the function
    alert('working again');
});

但是之前的方法要好得多。

使用replaceWith（）后，为什么页面滚动类不像往常一样？引导

1 个答案: