Ajax 调用后 Jquery 函数不起作用答案

【问题标题】：Jquery function doesn't work after Ajax callAjax 调用后 Jquery 函数不起作用
【发布时间】：2014-01-24 14:16:50
【问题描述】：

我有这个功能：

$(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 调用并生成额外的新内容后，当您单击新内容的按钮时，该功能不起作用。有什么不对的地方？

【问题讨论】：

你的 html 和 ajax 在你的问题中调用。

标签： javascript jquery ajax html

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

一旦你的 ajax 内容被替换为旧内容，你需要绑定 jQuery click 事件

在 AJAX 成功块中，您需要添加类似此处的代码新的响应 html 内容一个标签，如

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

这样你就可以用下面的代码修改内容后绑定新的点击事件

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

【讨论】：

【解决方案3】：

以下对我有用

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

【讨论】：

【解决方案4】：

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

$.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 函数中。

希望对你有帮助:)

编辑：我还注意到您的问题缺少});。

【讨论】：

Sorry :) ，你的意思是 ajax 完成后，click 函数不会执行？

【解决方案5】：

如果您知道 .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

【讨论】：

【解决方案6】：

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

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

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

或

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

【讨论】：

嗯，为什么我在 FireBug 中得到“TypeError: $(...).on is not a function”？
@SauliusSlavinskas 您在其中定义 $(...) 的选择器可能没有被选中，即不返回任何对象
好吧，我发现了这个问题...看来我使用的是早于 1.72 的 Jquery 库。感谢您的帮助！

【解决方案7】：

而不是这个：

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

这样做：

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

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

干杯

【讨论】：

很好地解释了为什么使用on 可以解决问题。使用$(document) 也是为我解决同样问题的一个更改。