当div加载内容时如何发出警报

Question

I have aa page that contains search toolkit. So when the search button is clicked, results will be fetched by a ajax from database and appended to a div.

It also shows number of records retrieved from database! I want to be able to do something immediately after the counter shows up a value.

I tried on click of the search button, but it only shows from the second click onward. Because when first clicked the search button, the data were not even fetched from database. Also, after data loaded, when click again it actually shows number of previously fetched records.

I thought, jquery's load() would suit better, but it doesn't too. Below are my attempts that failed. Can anyone suggest the best method please?

//This shows number of items fetched from database

len=data.length;

$(".len").append("<span class='light_blue' id='found'>"+len+"</span>
<span class='rm2' id='tname'> Tutors found</span>");

//This is how the results (fetched data) are appended into a div to be shown in the search page!

$(".the-inner-return").append("

All I want to do is to alert the count (basically I want to replace the text for id='tname' with something else when the count is 0 and 1 and more then 1).

Failed attempts:

$("#search").on("click",function()
{
    alert($("#found").text());//alerts the count 
});

$(".the-inner-return").on("load",function()
{
    alert($("#found").text());//alerts the count 
});

Answer 1

$(document).on("click", "#search",function(){
   alert($("#found").text());//alerts the count 
});


$(document).on( "load", ".the-inner-return", function() {
      alert($("#found").text()); //alerts the count 
});

Answer 2

You can trigger an alert each time the innerHTML for .len gets changed, for instance like this you get an alert whenever len>0 :

$('.len').bind("DOMSubtreeModified", function () {
    if (len > 0) {
        alert('changed');
    }
});

 len = 5; $('.len').bind("DOMSubtreeModified", function() { if (len > 0) { alert('>0'); } }); $(".len").append("<span class='light_blue' id='found'>" + len + "</span><span class='rm2' id='tname'> Tutors found</span>"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="len"></div>