Question

我有一个带有JavaScript的Rails应用程序，它在加载文档时有效。但是，当我转到新页面时，我需要重新加载JavaScript。无论如何在没有重新加载页面的情况下执行此操作，或者我是否必须重新加载页面？

我目前得到了像这样编写的jQuery代码

var main = function() {

var toggleProductImage = function() {
    $(this).children().each(function() {
        this.classList.toggle('hide');
    })
}

$('.ind a').each(function() {
    $(this).mouseenter(toggleProductImage);
    $(this).mouseleave(toggleProductImage);
}); 
};

Answer 1

使用动态生成的HTML的委托事件，例如。一个ajax请求。找到最接近静态的父级，我使用document，因为我不知道你的DOM树：

$(document).on('mouseenter', '.ind a', toggleProductImage)
           .on('mouseleave', '.ind a', toggleProductImage);

function toggleProductImage() {
    $(this).children().toggleClass('hide');
}

这将绑定document上的事件，并且仅在与目标匹配.ind a的元素时触发处理程序。

详细了解.on( events [, selector ] [, data ], handler )

events类型：PlainObject
  字符串键表示一个或多个空格分隔的事件类型和可选命名空间的对象，值表示要为事件调用的处理函数。

selector类型：字符串
  一个选择器字符串，用于过滤将调用处理程序的所选元素的后代。如果选择器为null或省略，则处理程序在到达所选元素时始终被调用。

我还更改了你的toggleProductImage以使其更像jQuery

Answer 2

我不认为重新加载javascript是你想要的。您可以获取一个js文件并再次解析它，但是之前加载的文件中的对象仍然存在。您必须跟踪您创建的所有内容，并删除所有事件处理程序，然后重新加载js。

相反，我认为你应该在父元素上附加mouseenter / mouseleave并过滤处理程序。

$('.ind').on('mouseenter', 'a', function(e) toggleProductImage);
$('.ind').on('mouseleave', 'a', function(e) toggleProductImage);

页面刷新 - JavaScript

2 个答案: