running Jquery Code after Ajax

Question

I am having some problems getting this part of my jQuery script to run after the Ajax – content switch…

/*no right click on img*/
        $('img').bind('contextmenu', function(e) {
            return false;
/*rollover*/
        $('.roll').on('mouseenter mouseout', function() {
            var original = $(this).attr('src');
            var replacement = $(this).data('hoverimg');
            $(this).attr('src', replacement).data('hoverimg', original);
        });
        });

Could someone please help me get it running I tried it whit a lot of Ideas, like:

var init = function(){
/*Code*/
}

Or

function init(){
/*Code*/
}

I am a bit confused right now.

Where's the ajax code? Also, your indenting is a little weird, but the code shown appears to assign the mouseenter and mouseout handlers to `.roll` _inside_ the contextmenu handler but after the `return false`, so that `.on()` statement will never run. If that's just because you've only put some of your code in the question please show a more complete sample. And please describe clearly what the desired effect is. — nnnnnn, Oct 04 '13 at 09:17
You also gotta use `http://api.jquery.com/live/` to see whether you can do your stuff after the call on DOM elements . — The Dark Knight, Oct 04 '13 at 09:19
@TheDarkKnight - Are you aware that `.live()` was _removed_ from jQuery in v1.9? Use the delegated form of `.on()` instead (assuming a delegated handler is appropriate here, which is hard to tell from the limited description in the question). — nnnnnn, Oct 04 '13 at 09:21
I actually like the ajaxComplete() function, but it's hard to know what is going on here without seeing some more code. — lharby, Oct 04 '13 at 09:21

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

If I understand correctly, you need to bind this only on ajax success. Then you can try binding and unbinding in jQuery.

unbind before calling the ajax and bind it back in the success callback of ajax.

However I would prefer to use .on() and .off() event handler attachments.

See this SO answer for .on VS .live VS .bind

edited May 23 '17 at 10:32

Community

1
1

answered Oct 04 '13 at 09:22

Praveen

55,303
33
133
164

score 1 · Accepted Answer · answered Oct 04 '13 at 09:22

There's one point that you make sure that if you are binding event on to the element that is dynamic then you should reference it through some static data which is already on the page like body or document. Example :

        $('body').bind('contextmenu','img', function(e) {
            return false;
            /*rollover*/
        $('body').on('mouseenter mouseout','.roll', function() {
            var original = $(this).attr('src');
            var replacement = $(this).data('hoverimg');
            $(this).attr('src', replacement).data('hoverimg', original);
        });
        });

Try running it now. It will definitely work.

Pleasure is mine my friend. – Shivam Chopra Oct 04 '13 at 10:01 — Shivam Chopra, Oct 04 '13 at 10:01

running Jquery Code after Ajax

2 Answers2