for injected html via ajax, RE-RUN document.ready() jqueries, IS POSSIBLE?
here is my case:
<html>
<body>
<head>
...
<script>
$(function(){
$('.do-tip').qtip({
content: 'This is a开发者_JAVA百科 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?
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!
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
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
加载中,请稍侯......
精彩评论