Ajax调用后，Jquery函数不起作用

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?

我的页面用喜欢的按钮加载内容,但在Ajax调用并生成其他新内容后,当您单击新内容的按钮时,该功能不起作用。什么可能不对?

6 个解决方案

#1

That is because you are using dynamic content.

那是因为您使用的是动态内容。

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

您需要将单击调用更改为委托方法,例如on

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

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

#2

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.

on将使用当前元素和与选择器匹配的未来元素。

Cheers

#3

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

如果您知道.post_button的容器,.btn_favorite然后使用

$('#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

所以如果找不到'.post_button,.btn_favorite'那么它会冒泡到container_id

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

否则,如果您不知道容器,则将其委托给文档

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

Reference

#4

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.

只是尝试将代码粘贴到done函数中。

Hope it helps :)

希望能帮助到你 :)

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

编辑:我也注意到你错过了});在你的问题上。

#5

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

#6

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

一旦ajax内容被替换为旧内容,您需要绑定jQuery click事件

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

在AJAX成功块中你需要添加像这里新的响应html内容的代码一样的标签

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

#1