Question

Everything i have read, leads more to event handlers being added using .live(), .on(), .bind(), .delegate(), etc..

I asked a question earlier that may not be coming across correctly, so i voted to delete that one and re-ask a much simpler one, from which i can do the rest i believe.

Is there a way to clear the innerhtml of an HTML element with a predefined class, including those loaded dynamically via AJAX, etc.

So every time an ajax call puts

<div class="triggerElement">something here...</div>

or similar on the page, i need it to be emptied. I think i have explained that correctly. Just let me know if not.

EDIT

Seems to be a lot of confusion. .empty & others like it will not work. If you call

$(".omButton").empty();

from the index, then some other module loads something later via AJAX with that same class, it WILL NOT empty that. If i have the element on the page first, then call it, yes it will work….

I need something along the lines of .live or .delegate that will work for any content loaded after the fact, as i have tried .empty and .html and neither work for the content that is loaded with AJAX.

Not sure how else to explain this. Thought it was pretty simple. Sorry!

EDIT 2…

index contains empty function

$(function(){
    $('.omButton').empty();
    $ajax... to load "loadedContent"
});

<div class="omButton"></div>
<div id="loadedContent"></div>

ajax returns

json_encode(array('test' => '<div class="omButton">Button Text</div>'));

So now the HTML on the index is

<div id="loadedContent"><div class="omButton">Button Text</div></div>

However since the inner div was not there when the page loaded, the .empty does not effect it. I need something that i can put on the page load that “monitors” for any occurance (static or dynamic) of it and empties it.

Hopefully that helps?

Answer 1

Try using $.ajaxComplete() – as this is triggered after every ajax request completes

$('body').ajaxComplete(function() {
  $('.triggerElement').empty();
});