Question edited for clarity
I make an AJAX call, using the $.getJSON() method, and add some elements to the page in the callback function:
$.getJSON("pathToFile/file.json", function(data) {
$.each(data.lst, function(i, item) { /* Add HTML elements to the page.. */ });
});
It all displays correctly, but the event handlers I’ve added for the elements don’t work:
$(".newElement").on("click", "input", function() {
alert("Something happened..");
});
Nothing happens when i click on the input elements. What am I missing?
Explanation
As @jbabey kindly pointed out, the documentation for .on() states that you have to bind the event handler to an existing element. The code doesn’t work because the elements don’t exist when the event handler is applied.
Are you getting any errors anywhere, or just nothing happens? Are you able to see any useful information in the traffic (fiddler, firebug, etc)?
I would first suggest changing your usage of $.getJSON to $.ajax so that you can add an error handler, then we can investigate the actual problem.
A good article on the different ways to use jQuery to make ajax calls can be found here:
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/