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\         


        

Answer 1

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;
});

Answer 2

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

Answer 3

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;
            }
         });
    });

Answer 4

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

Answer 5

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.

Answer 6

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

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