jquery event after html() function
Solution 1
Yes you can...
// create a reference to the old `.html()` function
var htmlOriginal = $.fn.html;
// redefine the `.html()` function to accept a callback
$.fn.html = function(html,callback){
// run the old `.html()` function with the first parameter
var ret = htmlOriginal.apply(this, arguments);
// run the callback (if it is defined)
if(typeof callback == "function"){
callback();
}
// make sure chaining is not broken
return ret;
}
// test it all works as expected (including chaining)
$("#mything").html("<div>My Thing</div>",function(){
console.log("Just did my thing");
}).css({color: 'red'})
However, like everyone else says, it is unnecessary as .html()
is synchronous, so you can just put your code following it rather than in a callback.
Demo: http://jsfiddle.net/billymoon/a49P4/
Solution 2
html()
is a synchronous operation, not an event, and so it would not logically accept a callback.
Just put your code after it:
$('container').html(data);
alert('test');
Solution 3
This syntax may also be of interest to you:
$(selector).html(function(index,oldHTML){
alert("test");
return data;
});
Solution 4
You can include the javascript code in your html response. An inline example:
$("#content").html("hello\<script>\alert('hello');\</script\>");
would update the div and also execute the code.
Alfonso Fernandez-Ocampo
Updated on December 28, 2020Comments
-
Alfonso Fernandez-Ocampo over 3 years
Is there a way to launch an event after html() has been fired? Such as:
$.post("ajax.php", {data :data}, function(data){ $("#countries").html(data, function(){ alert("test"); }); });
This is not working.
EDIT: I am asking this because I want to do few things(another call) with the information coming from the call... I wanted to simplify the example...I guess programmers always want to know why...
So here it is the example updated
$.post("ajax.php", {data :data}, function(data){ $("#countries").html(data, function(){ var id = $("#countries option:selected").attr("id"); getRegions(id); }); });
-
Mitya almost 12 yearsI still don't see the need for a callback.
html()
is synchronous - there is no need (indeed, no way) for a callback after it because there is no concept of callback in synchronous operations. Why can't you just do stuff after it, as we've all said? -
Alfonso Fernandez-Ocampo almost 12 yearsWell I am exactly doing this... nonetheless the getRegions is being launched before the data is fully loaded and therefore the id grabbed is not the correct one.
-
Esailija almost 12 years@user903645 you have some other bug going on, you need to take out anything after
.html()
, then whip out the DOM inspector and check that the html was correct. -
Alfonso Fernandez-Ocampo almost 12 yearslol again no.. I need the html(data) to get the correct id. I'm ALREADY doing what you guys are all saying but the id grabbed is not the correct... I need the function to grab the correct id and it is not possible until html(data) is fully done.
-
Esailija almost 12 yearsWay to promote accidental programming. You are completely misunderstanding what is going on, this didn't fix your code but some accidental change you applied that wasn't present before did. I am just trying to point out that it's always beneficial to understand the real reasons for making code behave as it does.
-
Billy Moon almost 12 yearsI quite like the hundred monkeys approach to programming myself - maybe not the most efficient, but far more rewarding when it comes off ,~)
-
Jason Sperske over 10 yearsI started to apply this answer to a different question but had to make some changes along the way to not break
.html()
to fetch the contents (and not break chaining). In case this is interesting to you: jsfiddle.net/Ga2zV :)