Jquery function doesn't work after Ajax call

Question

I've got this function:

$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {


//Fade in the Popup
$('.login_modal_message').fadeIn(500);

// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);  
return false;
});

My page loads content with favourite buttons, but after Ajax call and generated additional new content the function doesn't work when you click new content's buttons. What could be not right?

And your html and ajax call in your question. – Khamidulla Jan 07 '14 at 01:36 — Khamidulla, Jan 07 '14 at 01:36

Scary Wombat · Accepted Answer · 2014-01-07T01:46:46.723

16

That is because you are using dynamic content.

You need to change your click call to a delegated method like on

$('.post_button, .btn_favorite').on('click', function() {

or

$("body").on( "click", ".post_button, .btn_favorite", function( event ) {

edited Jan 07 '14 at 01:46

answered Jan 07 '14 at 01:40

Scary Wombat

41,782
5
32
62

Hmmm so why do I get "TypeError: $(...).on is not a function" in FireBug? – Saulius s Jan 07 '14 at 01:49
@SauliusSlavinskas It is possible that selector that you have defined $(...) inside this is not getting selected i.e. returning no object – Raunak Kathuria Jan 07 '14 at 01:53
Well, I found out the issue... It seems that I was using older than 1.72 Jquery library. Thanks for your help! – Saulius s Jan 07 '14 at 02:07

score 7 · Answer 2 · answered Jan 07 '14 at 01:44

7

Instead of this:

$('.post_button, .btn_favorite').click(function() {

do this:

$(document).on('click','.post_button, .btn_favorite', function() {

on will work with present elements and future ones that match the selector.

Cheers

answered Jan 07 '14 at 01:44

Edgar Villegas Alvarado

17,527
1
39
59

Good job explaining why using `on` solves the issue. Using `$(document)` was also a change that solved this same issue for me. – GWR Nov 04 '15 at 15:45

score 1 · Answer 3 · edited Dec 04 '19 at 14:26

1

class-of-element is the applied class of element. which is selector here.

  $(document).on("click", ".class-of-element", function (){
    alert("Success");
  });

edited Dec 04 '19 at 14:26

Satyam Pathak

4,618
1
17
43

answered Dec 04 '19 at 09:04

Pergin Sheni

175
1
11

HTTP · Answer 4 · 2014-01-07T01:55:53.060

0

I am not sure if I am getting your question right but you may want to try..

$.ajax({
  url: "test.html"
}).done(function() {
   $('.post_button, .btn_favorite').click(function() {


    //Fade in the Popup
    $('.login_modal_message').fadeIn(500);

   // Add the mask to body
   $('body').append('<div class="overlay"></div>');
   $('.overlay').fadeIn(300);  
   return false;
});

Just try to paste your code inside done function.

Hope it helps :)

EDIT: I also notice you are missing }); on your question.

edited Jan 07 '14 at 01:55

answered Jan 07 '14 at 01:41

HTTP

1,478
3
14
21

Sorry :) , Did you mean after ajax finished, `click` function will not execute? – HTTP Jan 07 '14 at 01:54

score 0 · Answer 5 · answered Jan 07 '14 at 01:51

If you know the container for .post_button, .btn_favorite then use

$('#container_id').on('click', '.post_button, .btn_favorite', function () { });

so if '.post_button, .btn_favorite' are not found then it will bubble up to container_id

else if you don't know the container then delegate it to document

$(document).on('click', '.post_button, .btn_favorite', function () { });

Reference

score 0 · Answer 6 · answered Jun 03 '15 at 13:37

The following worked for me

    $(document).ready(function(){ 
         $(document).bind('contextmenu', function(e) {
            if( e.button == 2 && jQuery(e.target).is('img')) {
              alert('These photos are copyrighted by the owner. \nAll rights reserved. \nUnauthorized use prohibited.'); 
              return false;
            }
         });
    });

score 0 · Answer 7 · answered Jun 03 '15 at 13:43

You need to bind the jQuery click event once your ajax content is replaced old content

in AJAX success block you need to add code like here new response html content one a tag like

<a href="#" id="new-tag">Click Me</a>

So you can bind the new click event after change the content with following code

$("#new-tag").click(function(){
   alert("hi");
   return false;
});

Jquery function doesn't work after Ajax call

7 Answers7

Linked