duplicate events in a temple when doing mousemove on an element


I have a case where I have to generate a hover of an element through a template that runs the website the same actions, but the issue is that its duplicates for the same reason what is dynamically called this in JavaScript

Here is the code of the temple to which I do the hover is the one that has the class results-saveItem

<span class="Item-Selection">
 <img src="/website-images/icons/btn{{ON}}-love.svg" id="_Botton-Love" class="results-saveItem {{saved}}" title="Add To Lovelist" data-groupnumber="{{groupnumber}}"> 

The jQuery code that makes hover is as follows:

 var love_green = "/website-images/icons/love-border-green.svg"; $(".results-saveItem").attr("src",love_green); 
asked by Jose Cervantes 19.12.2017 в 21:43

1 answer


Instead of applying the modification on all the elements that share the class .results-saveItem , apply it only on the object that triggers the listener:

$(document).on("mousemove",".results-saveItem",function() {
   var love_green = "/website-images/icons/love-border-green.svg"; 
   $(this).attr("src", love_green); 

EDIT: If it were for example a <div> and you would like to change the background:

$(document).on("mousemove",".results-saveItem",function() {
   var love_green = "url(/website-images/icons/love-border-green.svg)"; 
   $(this).css("background-image", love_green); 
answered by 19.12.2017 в 22:16