当我引入新的 DOM 时，如何继承 jQuery 效果

Question

我有一个幻灯片，我替换了幻灯片中的无序列表，图像发生变化，但任何效果都不会继承。这是引入新 DOM 的脚本：

jQuery("#kwick1").click(function () {
jQuery('#photography').load('/design.html #photography');
});

jQuery("#kwick2").click(function () {
jQuery('#photography').load('/design.html #design');
     });

我如何让 jQuery 幻灯片继承这个新的图像列表？ 我将这些功能和幻灯片放映功能都放在同一个文件中。 我有一个

   jQuery(document).ready(function() {

加载幻灯片脚本的。

Answer 1

您必须让我们知道您正在使用什么幻灯片插件。无论如何，您可能只需要销毁旧的幻灯片实例并重新启动它即可。像这样的东西：

//start slideshow on
var slideshow = $('#slideshow').cycle();
slideshow.start();
$('#button').click( function() {
   //depending on plugin api maybe stop, add and start again
   slideshow.stop();
   slideshow.addImages();
   slideshow.start();
   //or perhaps just destroy old slideshow and restart
   slideshpw = $('#slideshow').cycle();
});

Answer 2

要将事件附加到新添加的元素，您应该使用 live() 或 delegate();

jQuery('.yourselector').live('click', function(){

//do something on click
});

Answer 3

您应该学习如何使用事件委托，而不是将事件附加到每个元素。这样，您就可以在某个容器（甚至 document）上附加单个事件侦听器，并在事件冒泡时捕获它们。

此外，它将使您的代码看起来更干净、更容易理解。

• http://lab.distilldesign.com/event-delegation/
• http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-event-delegation-in-4-mines/
• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/

PS，如果您将代码放在 HTML 的底部（在 之前）然后，当它触发时，它已经是一个“onDomReady”事件。