Question

我想从

开发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文件上调用next函数。请帮忙。

Answer 1

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

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

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

Answer 2

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

还有其他一些问题：

循环似乎是多余的，你实际上并没有使用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的呼叫。我假设你出于某种原因把它放进去了。

动态按钮单击在Jquery中不起作用

2 个答案: