Ajax return html and use jquery on it

Question

I have an ajax call:

jQuery.ajax({
  type:'POST',
  url: 'http://www.mytestsite.com/wp-admin/admin-ajax.php',
  data:{
       'action':'display_image',
       'id_page': 9
       },
  success:function(data){
    $('#ajax').html(data);
  }
});

It works perfectly my div ID "ajax" display the html code:

<span id="test">HELLO</span>

The problem is in my footer page i have:

$('#test').on('click', function(){
alert('test');
});

When i click on "HELLO" (the html return of my ajax call) an alert box will display but it doesnt work. I dont know why...

You need to use [Event Delegation](https://learn.jquery.com/events/event-delegation/) for dynamically loaded elements. `$("#ajax").on("click", "#test", function () { alert("test"); });` — mhodges, May 12 '17 at 14:56
the content is dynamically added, so when you set the listener, the content didn't exist so no handler got added — Ruan Mendes, May 12 '17 at 14:57

score 2 · Answer 1 · answered May 12 '17 at 14:55

2

You have to bind the clickevent after you show the resulting htmlcode on the page. So just put the on-function inside your success function.

answered May 12 '17 at 14:55

schaffioverflow

510
3
14

vol7ron · Answer 2 · 2017-05-12T15:04:29.827

1

Because the content is loaded dynamically, you have two options:

You can bind the click event to an ancestor element that isn't dynamically loaded; so that when it is clicked, it searches for your selector and then calls the function:
```
$('body').on('click','#test', function(){
   alert('test');
});
```
After your content is loaded, you can bind a new event to that content. This would need to occur in your AJAX success callback (or some sort of promise). This would be a little more involved, since you said the code was in your footer page.

edited May 12 '17 at 15:04

answered May 12 '17 at 14:56

vol7ron

40,809
21
119
172

You know better than to answer duplicate questions – mhodges May 12 '17 at 14:58
1

@mhodges I didn't realize it was a duplicate, I'm just scanning the questions before lunch ;) – vol7ron May 12 '17 at 14:58

Ajax return html and use jquery on it

2 Answers2