[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Jquery click doesn't work on html created by ajax

Posted on 2012-09-11
Medium Priority
Last Modified: 2012-09-13
I've created a page that has a empty div#info which is filled with html from an ajax request. The request gets a list of spans from another page, which is put in the div. Now if I try to use a jquery click function on those spans, nothing happens. It took me some time to realise that this is newly created html. It looks like Jquery is not aware of the new html?

How can I get this working?
Question by:R7AF
LVL 17

Assisted Solution

sonawanekiran earned 1000 total points
ID: 38386137
Since you html is loaded dynamically. You should handle the click event like this..

$("#your_selector").on("click", "tr", function(){
LVL 44

Accepted Solution

Chris Stanyon earned 1000 total points
ID: 38386184
Yeah, sonawanekiran is correct, you need to use the on() function. If your version of jQuery is less than 1.7 then you use delegate() instead.

$("#info").on("click", "span", function(){

$('#info').delegate("span", "click", function(){
LVL 39

Expert Comment

by:Roger Baklund
ID: 38386376
Either use delegated events as described above, or set the event handlers after the HTML is loaded:

// '#info span' exists now
$('#info span').click( ... );

Open in new window

LVL 13

Expert Comment

by:Andrew Derse
ID: 38387254
Or you can simply call a new on click function after your ajax loads...

for example...basic logic only here...
function getSpanClick() {
  //get click param after ajax is loaded...

function ajaxCall() {
  // get information...
  // write information...
  // call next function...  

Open in new window

This method works 100% of the time...everytime...I've been using it ever since I've been developing with jQuery.
LVL 13

Author Closing Comment

ID: 38394249

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month20 days, 3 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question