jquery函数和ajax的最佳实践

我是新来的ajax，并且想要最好地理解如何编写我的jQuery代码，以便通过ajax调用页面，我的jQuery函数（简单的东西，如幻灯片和叠加）仍然会工作。jquery函数和ajax的最佳实践

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

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

    //perform some functions 

});

为了使这项功能相同工作时，该页面已通过AJAX加载，我重复我的代码，并将其绑定到一个名为“Ajax的包装”的div正常加载这个页面上。没有这一步，上面的代码就不会在ajax页面上执行。

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

    //exact same functions as above 

});

这两件事情都有效，但这是最有效的方式吗？似乎重复性为我的文件中的每个单一功能执行这两个步骤的过程。

来源

2017-07-06 Ryan Swanson

这是因为微内容被破坏，再加入我猜，这意味着它是一个动态的元素，这通常意味着你绑定的静态父单击事件运行FNC – ThisGuyHasTwoThumbs

什么过程分为两个步骤？用第二种方法替换第一种方法。这是任何一种方式。 – David

*“两步法”*是什么意思？几乎看起来你没有提供足够的信息来帮助 – charlietfl

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

    //exact same functions as above 

});

是说：“当我‘AJAX-包装’中单击检查，看看是否我点击的元素是‘microContentWrap’，如果是，则执行该功能”。这种方法的好处是，当你绑定click甚至listener时，'microContentWrap'不需要存在。

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

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

来源

2017-07-06 16:26:39 Pat

第二种方法是我们在业界称之为坏主意。主要是因为每次你做这个Ajax调用时，都会添加另一个事件处理程序，并且之前附加的一个事件处理程序被留下来，可能会泄漏内存。更好地使用第一个选项。 –

我的意思是说，把事件绑定放在一个函数中是一样的：“每次你做这个函数调用时，都会添加另一个事件处理函数......”如果他只计划在_successfully_上调用ajax一次 - 没有看到这个问题。第一种方法是“我真的不知道这个元素何时会存在或不存在”，其次是“我确切知道这个元素何时存在或不存在”。第二种方法更令人联想到依赖注入imo。 – Pat

我必须同意@MikeMcCaughan。每一次成功的AJAX调用都会绑定更多的事件处理程序。这是一般的反模式，并且与依赖注入无关（依赖注入通常检查依赖关系是否已被加载，如果是，则不会重新加载）。最好的方法是简单地监听事件冒泡到保证在运行时存在的父代（第一种方法）。它不在乎元素是否存在。它只是监听事件，并检查事件是否由'.microContentWrap'发出。这样更有效率。 – Terry

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

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

    //exact same functions as above 

});

来源

2017-07-06 20:49:48

jquery函数和ajax的最佳实践

回答

相关问题