jquery event after html() function

Question

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);
   });
});

Billy Moon · Accepted Answer · 2014-03-19T11:10:06.810

23

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/

edited Mar 19 '14 at 11:10

answered Aug 06 '12 at 10:43

Billy Moon

57,113
24
136
237

1

Way 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. – Esailija Aug 06 '12 at 11:38
I quite like the hundred monkeys approach to programming myself - maybe not the most efficient, but far more rewarding when it comes off ,~) – Billy Moon Aug 06 '12 at 12:40
1

I 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: http://jsfiddle.net/Ga2zV/ :) – Jason Sperske Nov 14 '13 at 21:27

score 2 · Answer 2 · answered Aug 06 '12 at 10:28

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');

answered Aug 06 '12 at 10:28

Mitya

33,629
9
60
107

I 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? – Mitya Aug 06 '12 at 10:43
lol 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. – Alfonso Fernandez-Ocampo Aug 06 '12 at 10:47

score 2 · Answer 3 · edited Dec 27 '16 at 13:28

2

This syntax may also be of interest to you:

$(selector).html(function(index,oldHTML){
    alert("test");
    return data;
});

edited Dec 27 '16 at 13:28

mooreds

4,932
2
32
40

answered Aug 06 '12 at 10:29

Purag

16,941
4
54
75

score 1 · Answer 4 · answered Aug 06 '12 at 10:32

1

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.

answered Aug 06 '12 at 10:32

Ekim

1,105
11
28

Esailija · Answer 5 · 2012-08-06T11:42:17.703

0

No but there is no reason you couldn't do this:

$.post("ajax.php", {data :data}, function(data){
   $("#countries").html(data);
   var id = $("#countries option:selected").attr("id");
   getRegions(id);
});

edited Aug 06 '12 at 11:42

answered Aug 06 '12 at 10:28

Esailija

138,174
23
272
326

1

Well 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. – Alfonso Fernandez-Ocampo Aug 06 '12 at 10:43
@user903645 you have some other bug going on, you need to take out anything after `.html()`, then whip out the [DOM inspector](https://developers.google.com/chrome-developer-tools/docs/overview) and check that the html was correct. – Esailija Aug 06 '12 at 10:46

jquery event after html() function

5 Answers5

Demo: http://jsfiddle.net/billymoon/a49P4/

Linked