Question

我有这个功能：

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

我的页面使用收藏夹按钮加载内容，但在Ajax调用并生成其他新内容后，当您单击新内容的按钮时，该功能不起作用。什么可能不对？

Answer 1

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

您需要将点击通话更改为委托方法，例如on

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

或

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

Answer 2

而不是：

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

这样做：

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

on将与当前元素以及与选择器匹配的未来元素一起使用。

干杯

Answer 3

我不确定我的问题是否正确，但您可能想尝试..

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

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

希望有所帮助：）

编辑：我还注意到你在问题上遗漏了});。

Answer 4

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

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

因此，如果找不到'.post_button, .btn_favorite'，那么它会冒出container_id

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

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

Reference

Answer 5

以下为我工作

    $(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 6

一旦您的ajax内容被替换为旧内容

，您需要绑定jQuery click事件

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

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

因此，您可以在使用以下代码更改内容后绑定新的单击事件

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

Answer 7

class-of-element是元素的应用类。这是这里的选择器。

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

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

7 个答案: