for injected html via ajax, RE-RUN document.ready() jqueries, IS POSSIBLE?

Question

here is my case:

    <html>
    <body>
    <head>
    ...
    <script>
 $(function(){
        $('.do-tip').qtip({
            content: 'This is a tip of active hovered element',
            show: 'mouseover',
            hide: 'mouseout',
  })
 });
    </script>
    </head>
    <body>
    <a href="http://www.google.com" class="do-tip">google</a>

    <input type="button" value="load div by ajax" />
    <div> <!-- this div loaded by ajax -->
    <div>
    <a href="http://www.yahoo.com" class="do-tip">yahoo</a> <!-- HOW TO HERE, run the existing script only for this part, JQUERY UNCLE must have a solution-->
    </body>
    </html>

any ideas?

score 6 · Accepted Answer · answered Dec 22 '10 at 09:12

While it is not perfectly clear what you are trying to do, I will try my MagicGuess tool and offer you an answer.

So, you need to

a) perform some functionality on document load; this functionality does something with all .do-tip elements on the page

b) perform the same functionality after you load something via AJAX, but now this needs to operate with another set of elements.

Is that true? If so, here is what I would do:

function doEverythingINeed(selector) {
    $(selector).qtip({
        content: 'This is a tip of active hovered element',
        show: 'mouseover',
        hide: 'mouseout',
    })

}

$(function() {
    doEverythingINeed('.do-tip');
});

and call doEverythingINeed with another selector after you load your HTML via AJAX. If you use $.ajax() function, then you should just do

$.ajax({
    //parameters
    success: function() {
        //some other actions if needed
        doEverythingINeed('your selector');
        //more actions if needed
    }
});

Hope that helps!

FENOMENAL guessing. Not only the guessing was right. I was having this exact same problem with qtip2 and your solution did the trick. — Diego Sagrera, Apr 19 '14 at 22:38

score 4 · Answer 2 · edited May 23 '17 at 11:59

Just in case it helps someone else, I had a very similar use case and solved it with jQuery's .live() event binder - much simpler than the solution I was trying to engineer by re-processing all $('document').ready() events.

The use case: A page with a lot of links (HTML a tags) on it. On $('document').ready() I bound the .click() events of the relevant links to a function that called some .ajax(), which retrieved more links of the same type and injected their HTML into the page. Problem was, the new links weren't bound. Clicking on the new links didn't trigger the .ajax() code like it should.

I spent ages trying to re-trigger the ready event after the HTML was injected and then realised that binding the events with .live('click) instead of .click() would give exactly the same result with zero extra code.

By the way, someone else has given a very good solution to the original question elsewhere - see question 2238030

score 0 · Answer 3 · answered Sep 03 '14 at 12:57

0

You can build in a module execution controller into the ready function and re-run the functions after you've injected the HTML. Something like this:

https://gist.github.com/miguel-perez/476046a42d229251fec3

answered Sep 03 '14 at 12:57

Miguel Ángel Pérez

123
6

for injected html via ajax, RE-RUN document.ready() jqueries, IS POSSIBLE?

3 Answers3