页面刷新-JavaScript

Question

I have a Rails application with JavaScript and it works when the document is loaded. However, I need the JavaScript to reload when i go to a new page. Is there anyway to do this without reloading the page, or do i have to reload the page?

I've currently got the jQuery code written like this

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

Use delegated events with dynamically generated HTML, from eg. an ajax request. Find the closest parent that are static, I'm using document as I don't know your DOM tree:

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

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

This will bind the events on document and only fire the handlers if a element matching .ind a the target.

See more about .on( events [, selector ] [, data ], handler )

events Type: PlainObject
An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

selector Type: String
A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

I also changed your toggleProductImage to make it more jQuery-like

Answer 2

I don't think reloading the javascript is what you want. You could get a js file and parse it again, however the objects from the previous load of the file will still be there. You would have to keep track of everything you create, and remove all event handlers, then reload the js.

Instead I think you should attach the mouseenter / mouseleave on the parent element and filter the handler.

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