jquery click() function not working -

this question has answer here:

• event binding on dynamically created elements? 19 answers

<ul>     <li id="one"></li>     <li id="two"></li>     <li id="three"></li>     <li id="four"></li>     <li id="five"></li>     <li id="six"></li>     <li id="seven"></li>     <li id="eight"></li> </ul> 

script

$.getjson("data.php", function(data) {     var items = [];     $.each(data, function(i, val) {         $("#" + i).html("<a href='javascript:void(0);' class='hov'>" + val + "</a>");     }); }); $('.hov').click(function() {     alert("handler .click() called."); }); 

data.php :

{     "one": "yahoo",     "two": "gooogl",     "three": "bing",     "four": "ebay",     "five": "ask",     "six": "gmail",     "seven": "alexa",     "eight": "example",     "nine": "ymail" } 

you need bind click handler after element loaded,

$.getjson("data.php", function(data) {     var items = [];     $.each(data, function(i, val) {         $("#" + i).html("<a href='javascript:void(0);' class='hov'>" + val + "</a>");     });     $('.hov').click(function() {         alert("handler .click() called.");     }); }); 

other option use delegates. code like,

$.getjson("data.php", function(data) {     var items = [];     $.each(data, function(i, val) {         $("#" + i).html("<a href='javascript:void(0);' class='hov'>" + val + "</a>");     });  }); $(document).on('click', '.hov', function() {     alert("handler .click() called."); });