Question

我在PHP文件中输出了一些HTML：

echo "<button class=\"ui-btn ui-mini\" id=\"showFooter\">click</button>
            <div id=\"slideshow-nav\">      
                    <button data-icon=\"home\" data-iconpos=\"notext\" data-mini=\"true\" data-inline=\"true\">Home</button>
                    <button data-icon=\"arrow-l\" data-iconpos=\"notext\" data-mini=\"true\" data-inline=\"true\">Previous</button>
                    <button data-icon=\"arrow-r\" data-iconpos=\"notext\" data-mini=\"true\" data-inline=\"true\">Next</button>
                    <button data-icon=\"minus\" data-iconpos=\"notext\" data-mini=\"true\" data-inline=\"true\">Pause</button>
                    <button data-icon=\"refresh\" data-iconpos=\"notext\" data-mini=\"true\" data-inline=\"true\">Resume</button>
            </div><!-- /slideshow-nav\ -->"

作为点击按钮的事件，我有：

$(document).ready(function() {$("#showFooter").click(function(){
            $("#slideshow-nav").toggle();
            });});

当我把它们放在一个HTML文件中时工作正常，但是在我从PHP脚本加载HTML输出后，该函数没有被执行。什么都没有在控制台中显示错误。

顺便说一句，我想做的是为jQuery Cycle2幻灯片提供可显示的导航。如果有人知道一个好的插件或一个简洁的方法来做到这一点，请告诉我。我不想要代码，但可能暗示要寻找什么。

Answer 1

$(function() { // shortcut for $(document).ready

  $(document).on( 'click', '#showFooter', function(){
    $("#slideshow-nav").toggle();
  });

}

这会将单击绑定到文档对象本身。当文档就绪函数触发时，我们知道它将在那里。＆＃39; on＆＃39;方法允许您传入三个参数。首先是要观看的事件（＆＃39;点击＆＃39;），然后是可选的代表（＆＃39;＃showFooter＆＃39;）。单击文档时（基本上任何页面上的任何单击）。 jQuery将检查它是否来自＆＃39; #showFooter＆＃39;元件。如果稍后通过AJAX将元素添加到页面中并不重要。

最后我们传递了要执行的函数。

jQuery文档：

on method（阅读“直接和委派事件”一节）

JS函数没有被PHP生成的输出触发

1 个答案: