0

我想在 HTML5 演示文稿中开发动态演示文稿内容

http://www.script-tutorials.com/creating-an-attractive-presentation-with-html5/

本教程适用于静态内容。但我想用 jquery 编写动态内容，如下所示：

$(document).ready(function(){

            $.getJSON(url, function (data) {

                   for(var i in data)
                       {                             
                        output=" <button title='Next' id='nav-next' class='nav-next'>Click</button>";                      
                       }

                    $("#placeholder").append(output);
                });
 });

单击按钮时，我想转到下一张幻灯片。但是这个事件不起作用。我想在 javascript 文件上调用下一个函数。请帮忙。

4

2 回答 2

1

您说“单击按钮时”，这就是答案使用jQuery.on()方法。

$('#nav-next').on('click',(function () {
     // click code.
});

然后当您DOM使用定义的 id创建时，.on将动态附加点击事件。

于 2013-02-26T03:43:19.667 回答
0

您没有将事件附加到新按钮，这可以使用 jQueryclick方法完成。

还有一些其他问题：

  • 循环似乎是多余的，你实际上并没有在data.
  • output在您的示例中被定义为全局变量，用于var将其保持在函数范围内。

代码：

$(document).ready(function() {
    $.getJSON(url, function (data) {

        // use var, your output was a global variable
        var output = " <button title='Next' id='nav-next' class='nav-next'>Click</button>";                      

        $("#placeholder").append(output);

        // attach the click event to the new button
        $('#nav-next').click(function () {
            // TODO: Implement click method
        });
    });
});

由于您没有使用数据，因此您getJSON当前可以安全地删除对的调用。我想你把它放进去是出于某种原因。

于 2013-02-26T02:59:11.367 回答