jQuery循环文本幻灯片不工作

Question

我在使用jQuery循环插件时遇到问题。在我的页面上，我使用它进行图像和文本幻灯片放映。图像幻灯片效果很好，但其中一个文本幻灯片出现了问题。请考虑下面的代码。我使用下面的div作为文本幻灯片的幻灯片。

<div>
    <p>This is slide1</p>
    <h4>author 1</h4>
</div>
<div>
    <p>This is slide2</p>
    <h4>author 2</h4>
</div>

如果我在HTML页面中使用上面的代码作为静态块，那么幻灯片放映效果很好。然而，如果我通过Javascript生成上面的代码，我会得到一个错误。以下是Chrome控制台给我的。

无法读取未定义的的属性"cycleW"

我不知道这个问题是什么，所以如果有任何帮助，我将不胜感激。谢谢

Answer 1

如果在页面加载时使用JavaScript生成HTML，请确保像下面这样使用jQuery，并确保在插件之前调用HTML生成脚本。

$(function() {
   //code goes here
});

如果你在一个事件上生成HTML（例如点击按钮），你需要在任何新代码上调用插件函数，它也可以处理它，所以：

$(function() {
    myBtn.click(function() {
        var generatedElement = generateSomeElement();
        $('body').append(generatedElement);
        generatedElement.callPlugin();
    });
});

Answer 2

我遇到了和你一样的问题，主流理论似乎是正确的——循环插件试图在DOM加载完成之前解析幻灯片。为了解决这个问题，我必须创建一个sceond函数，等待div完成加载后再开始循环，如下所示：

function startSlideshow(id, timeout) {
    var children = $("#" + id).children().size();
    // child div loaded yet?
    if (children <= 0) {
            // no! wait for it
            setTimeout("startSlideshow('" + id + "', '" + timeout + "')", timeout);
    }
    else {
            // yes, start the cycle plugin
            $("#" + id).cycle({ 
                    fx: 'fade',
                    timeout:  timeout,
                    speed: 500
            });
    }
}

因此，当我调用AJAX来加载div时，我会这样做：

// load divs with multiple ajax calls
addRandomImages("slideshow");
addRandomImages("slideshow");
addRandomImages("slideshow");
// start the slideshow when the divs are loaded
startSlideshow("slideshow", 5000)

Answer 3

我认为问题是javascript生成的HTML不在DOM中，或者它的引用没有存储在变量中，所以这就是为什么未定义错误的原因。但只有这些信息真的很难判断。

您有没有在body onload事件中尝试过，在该事件中，您首先执行生成html的javascript，然后让jquery完成它的工作？