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

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

您是否尝试过使用body onload事件，首先执行生成html的javascript，然后让jquery完成其工作？

Answer 3

我遇到了和你一样的问题，流行的理论似乎是对的 - 循环插件试图在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)

jQuery循环文本幻灯片无法正常工作

3 个答案: