JS function not getting triggered on output generated by PHP

Question

I'm having some HTML being output in a PHP file:

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

As an event for the click button, I have:

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

which works fine when I put both together in an HTML file but the function does not get executed after I load the HTML output from the PHP script. No errors being displayed in the console what so ever.

By the way what I wanna do is providing displayable navigation to a jQuery Cycle2 slideshow. If anyone know a good plugin or a neat way to do this, please let me know. I don't want code but maybe a hint what to look for.

Show please in which way you connect this js function to the document. — fiction, Aug 10 '14 at 18:07
*"after I load the HTML output from the PHP"* what does that mean in this context? — Felix Kling, Aug 10 '14 at 18:16
Are you importing the script to the page, or do you have it hard-coded in? — Feek, Aug 10 '14 at 18:25
Import it via Ajax. When I check the whole output in the dev tool, it's all there. The function is in a script tag at the bottom of the loading page. — Pete, Aug 10 '14 at 18:57
When you add markup via asynchronous means, you either need to re-add the event handler to the new element(s) or use a delegate (`$.on()` using a static parent and the second selector). Event handlers are not added magically to new elements in the DOM when they are applied directly as you have here. And you can use single-quotes in a double-quoted string in PHP; it sure beats trying to escape every gosh darn double quote. — Jared Farrish, Aug 10 '14 at 19:53

score 2 · Accepted Answer · answered Aug 10 '14 at 19:56

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

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

}

This binds a click to the document object itself. Which we know is going to be there when the document ready function fires. The 'on' method lets you pass in three parameters. First the event to watch ('click'), then an optional delegate ('#showFooter'). When the document is clicked (basically any click anywhere on the page). jQuery will check to see if it originated from the '#showFooter' element. It doesn't matter if the element was added to the page later via AJAX.

finally we pass the function to be executed.

jQuery Documentation:

on method (read the section called Direct and delegated events)

JS function not getting triggered on output generated by PHP

1 Answers1