Javascript jquery函数和ajax的最佳实践

Javascript jquery函数和ajax的最佳实践,javascript,jquery,ajax,Javascript,Jquery,Ajax,我是ajax新手,希望能够更好地理解如何编写jQuery代码,以便通过ajax调用页面,我的jQuery函数(简单的幻灯片和覆盖图)仍然可以工作 下面是我目前正在做的工作,使我的jquery在没有ajax的独立页面上工作 $('.microContentWrap').click(function(){ //perform some functions }); 为了在通过ajax加载此页面时使相同的函数工作,我复制代码并将其绑定到名为“ajax包装器”的div,该div通常在该页面上

我是ajax新手,希望能够更好地理解如何编写jQuery代码,以便通过ajax调用页面,我的jQuery函数(简单的幻灯片和覆盖图)仍然可以工作

下面是我目前正在做的工作,使我的jquery在没有ajax的独立页面上工作

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

    //perform some functions

});
为了在通过ajax加载此页面时使相同的函数工作,我复制代码并将其绑定到名为“ajax包装器”的div,该div通常在该页面上加载。没有这个步骤,上述代码就不会在ajax页面上执行

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

    //exact same functions as above

});
这两种方法都有效,但这是最有效的方法吗?对我的文件中的每个函数执行这两个步骤似乎是重复的

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

    //exact same functions as above

});
是这样说的:“当我在‘ajax包装器’中单击时,检查我单击的元素是否为‘microContentWrap’,如果是,则执行此功能”。这种方法的好处是,当您绑定点击式侦听器时,“microContentWrap”不需要存在

另一种方法是将事件侦听器添加到ajax回调函数中的“microContentWrap”中。例如:

$.ajax({
    url:"getvalue.php",  
    success:function(data) {
         $('body').append('<div class="microContentWrap"></div>');
         $('.microContentWrap').click(function(){}); 
    }
  });
$.ajax({
url:“getvalue.php”,
成功:功能(数据){
$('body')。追加('');
$('.microContentWrap')。单击(函数(){});
}
});

解决这个问题的方法其实很简单,我只是不懂绑定。我遇到的问题是,在微内容进入后,ajax包装器会被破坏。在其他非ajax页面上没有ajax包装器,这就是为什么我认为需要两个函数。通过约束身体,我消除了这个问题

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

    //exact same functions as above

});

我猜这是因为microContent被销毁并重新添加,这意味着它是一个动态元素,通常意味着你在静态父对象上绑定click事件来运行fncWhat两步流程?用第二种方法替换第一种方法。无论哪种方式都是一步。你说的“两步过程”是什么意思?似乎你没有提供足够的信息给任何人help@ThisGuyHasTwoThumbs你是对的。它正在被摧毁。在阅读了所有这些评论之后,我意识到我可以将所有内容都绑定到body元素,然后就不需要重复代码了。第二种方法是我们业界所说的坏主意。主要是因为每次调用ajax时,都会添加另一个事件处理程序,而之前附加的事件处理程序会悬空,可能会泄漏内存。最好使用第一个选项。我的意思是,在函数中添加事件绑定也可以这样说:“每次调用该函数时,都会添加另一个事件处理程序…”如果他只计划一次成功调用该ajax,我看不出有什么问题。第一种方法是“我真的不知道这个元素何时会存在或不存在”,第二种方法是“我确切地知道这个元素何时会存在或不存在”。第二种方法更像是依赖注入,我必须同意@MikeMcCaughan的观点。每一次成功的AJAX调用都将绑定额外的事件处理程序。这通常是一种反模式,与依赖项注入无关(依赖项注入通常检查依赖项是否已加载,如果已加载,则不会重新加载)。最好的方法是简单地侦听事件冒泡到保证在运行时存在的父级(第一种方法)。它不关心元素是否存在。它只侦听事件,并检查事件是否由
.microContentWrap
发出。同样,如果您多次调用此服务,请添加一个检查,但这不是模式中的缺陷。是的,这可以称为依赖注入
.microContentWrap
取决于ajax调用的成功与否,创建/绑定元素应绑定到它。将单击绑定到大型父元素并每次检查其是否为正确的子元素并不比直接将其绑定到所需的元素更有效。但是您将事件侦听器绑定到多个元素多次,这是一个主要的性能问题,当您(1)每次调用都附加了许多
.microContentWrap
,以及(2)在同一文档中进行了许多调用时,我相信您没有抓住要点。在侦听事件冒泡时,您只侦听冒泡的单击事件。