Call jQuery function after ajax html get loaded

Question

So i have this 2 jQuery functions stored in a .js file and .js file is loaded before head tag what is in .js file: ``` $(document).ready(function(){ $("#button1").click(function(){ $.ajax({ type: 'GET', url: 'button2.php', success: function(html){ $('#button_div').html(html) } , }); }); $("#button2").click(function(){ $.ajax({ type: 'GET', url: 'button1.php', success: function(html){ $('#button_div').html(html) } , }); }); }); ``` So after body I have: ```

``` when the button1 is pressed will load php file named button2.php with the div and button2 code, but here when button2 is pressed will not execute the button2 click function. Why? If I put the jQuery code of button2 inside button2.php file after elements will work fine. But I don't want that. I want to keep the jQuery lines saved only in a .js file and only before `` tag. I don't want to use jQuery lines after elements.

Accepted Answer

When you call `$("#button2").click()`, `#button2` does not exist yet, so you are calling it on nothing. In order to have the click event work, you need to use event delegation (i.e. bind to an element that exists) like so:

```
$(document).on('click', '#button2', function () {
```

Then, any time `#button2` gets added, clicking it will trigger that event callback.

(I use `document` as an example, but try to use an ancestor that is closer to `#button2` than that).

Call jQuery function after ajax html get loaded

Solution

Problem