Javascript PHP生成的输出未触发JS函数

我在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\ -->"

当我将两者放在一个HTML文件中时，它工作得很好，但在我从PHP脚本加载HTML输出后，函数不会执行。控制台中不会显示任何错误

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

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

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

}

这会将单击绑定到文档对象本身。当documentready函数启动时，我们知道它将出现在那里。“on”方法允许您传入三个参数。首先是要观看的事件（“单击”），然后是可选的委托（“showFooter”）。单击文档时（基本上是页面上任何位置的任何单击）。jQuery将检查它是否源自“#showFooter”元素。稍后是否通过AJAX将元素添加到页面并不重要

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

jQuery文档：

---

（阅读“直接和委托事件”一节）

请显示您将此js函数连接到文档的方式。“在我从PHP加载HTML输出后”这在上下文中意味着什么？您是将脚本导入页面，还是将其硬编码？通过Ajax导入。当我在dev工具中检查整个输出时，它们都在那里。该函数位于加载页面底部的脚本标记中。通过异步方式添加标记时，您需要将事件处理程序重新添加到新元素中，或者使用委托（

$.on（）

使用静态父项和第二个选择器）。当事件处理程序直接应用于DOM中的新元素时，它们不会像您在这里看到的那样神奇地添加到DOM中。在PHP中，可以在双引号字符串中使用单引号；这当然比试图逃避每一个该死的双重引用要好。

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

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

}