Function Inside Mouseenter Not Changing Attr

Question

I'm trying to run an attr change inside a mouseenter function. I need to make a new function within the mouseenter function because I eventually need it to callback. I'm starting from the beginning though and it's not functioning on the most basic level right now.

In the below example, you'll see that I first iterate through all images. I then take the images file names and change the suffix (that's not really important to this as far as I can tell, I'm just including it so I have everything I'm doing in here just in case). I then run a 'mouseenter' function that will fire on the image element. It logs the new 'src' of the image to the console and then should change the src. It logs the src successfully but doesn't fire the attr function successfully.

I've also logged $(this).attr('src') to make sure it's recognizing the image correctly and that works as well. So it knows the current $(this).attr('src') and recognizes the new_img_src variable yet doesn't fire the function. Why would that be?

Like I said, I eventually want to do a callback function which is why this is formatted this way. I will be called img_loop() from within img_loop() once I have all the code set up so I need the img_loop() function to be there as opposed to just using the $(this).attr() function inside mouseenter.

Thanks for the help!

$('img').each(function(){

    var img_src = $(this).attr('src');
    var url_prefix = img_src.substr(0, img_src.indexOf('-1.jpg')); 
    var new_img_src = url_prefix + '-3.jpg';

    $(this).mouseenter(function(){

        function img_loop(){
            console.log(new_img_src);
            $(this).attr('src',new_img_src);
        }

        img_loop();
    });

});

Have you tried removing the `img_loop()` method, and just executing the `log` and `attr` change there? Your method might not be accessing the correct `this`. — Soturi, Mar 14 '14 at 19:36
The problem is the way you defined and called `img_loop`. `this` refers to `window`, not the DOM element. See the linked question for possible solutions. — Felix Kling, Mar 14 '14 at 19:37
Oh ok, so maybe I'll try to set this = $(this) right before img_loop() and then using this.attr inside the function instead of $(this).attr ? I'll try that right now. — MillerMedia, Mar 14 '14 at 19:38
@MxmastaMills: You cannot create a variable with name `this` or assign a value to it. Use a different variable name. — Felix Kling, Mar 14 '14 at 19:39
@FelixKling, perfect, that worked. Thanks. I'll close this question since it seems to be a duplicate...thanks for pointing that out. — MillerMedia, Mar 14 '14 at 19:41

James · Answer 1 · 2014-03-18T15:14:28.873

Probably be easier not to assign a .mouseenter() on every element, but use delegation with the jquery .on()

$('body').on('mouseenter','img',function(){
    var me = $(this),
        src = me.attr('src');

    //User your stuff to prep src string
    src = src.substr(0, src.indexOf('-1.jpg')); 
    src = src+ '-3.jpg';

    me.attr('src',src);
});

You don't have to keep resetting this listener, just attach it to the body. When each img is entered then it will propagate to the body. Then you can dynamically add img to the page and not have to worry about adding or removing listeners.

Function Inside Mouseenter Not Changing Attr

1 Answers1