Question

我是ajax的新手，想要最好地理解如何编写我的jQuery代码，然后通过ajax调用页面，我的jQuery函数（简单的东西，如幻灯片和叠加）仍然可以工作。

以下是我目前正在做的工作，让我的jquery在没有ajax的独立页面上工作。

$('.microContentWrap').click(function(){

    //perform some functions

});

为了在通过ajax加载此页面时使相同的功能正常工作，我正在复制我的代码并将其绑定到一个名为“ajax-wrapper”的div，该div通常在此页面上加载。如果没有这一步，上面的代码就没有在ajax页面上执行。

$("ajax-wrapper").on("click", ".microContentWrap", function() { 

    //exact same functions as above

});

这两件事都有效，但这是最有效的方法吗？对于我文件中的每个函数，似乎都是重复执行此两步过程。

Answer 1

$("ajax-wrapper").on("click", ".microContentWrap", function() { 

    //exact same functions as above

});

说：“当我点击'ajax-wrapper'时，检查我点击的元素是否是'microContentWrap'，如果是，则执行此功能”。这种方法的好处是，当你绑定click even listener时，不需要存在'microContentWrap'。

另一种方法是在ajax回调函数中将事件监听器添加到'microContentWrap'。例如：

$.ajax({
    url:"getvalue.php",  
    success:function(data) {
         $('body').append('<div class="microContentWrap"></div>');
         $('.microContentWrap').click(function(){}); 
    }
  });

Answer 2

对此的解决方案实际上非常简单，我只是不理解绑定。我遇到的问题是，在microContent进入后，ajax-wrapper会被破坏。在其他非ajax页面上没有ajax-wrapper，这就是为什么我认为需要有两个函数。通过绑定身体，我消除了这个问题。

$("ajax-wrapper").on("click", ".microContentWrap", function() { 

    //exact same functions as above

});

使用jquery函数和ajax的最佳实践

2 个答案: