Question

I using PHP/Javascript – Widget of alexmarandon from link http://alexmarandon.com/articles/web_widget_jquery/
And in project of me is:

script.js
html.php
demo.html

In script i using code:

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.1') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) { 
        /******* Load CSS *******/
        var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "style.css" 
        });
        css_link.appendTo('head');          

        /******* Load HTML *******/
        var jsonp_url = "data.php?callback=?";
        $.getJSON(jsonp_url, function(data) {
          $('#example-widget-container').html(data);
        });
        $('.submit').click(function(){
           alert('test'); 
        });
    });
}

})(); // We call our anonymous function immediately

Then i call data in data.php

$str  = '<div class="widget_advance">';
$str .= '<form method="post" id="form_widget_advance">';
$str .= '<input type="submit" value="Tìm" class="submit" />';
$str .= '</form>';
$str .= '</div>';

echo $_GET['callback'] . '(' . json_encode($str) . ');';

finally, in demo.html is result:

<script src="script.js" type="text/javascript"></script>
<div id="example-widget-container"></div>

=> When I click on button submit is result not show alert('test'); How to fit it ?

Answer 1

Put this inside as such:

$.getJSON(jsonp_url, function(data) {
  $('#example-widget-container').html(data);
  $('.submit').click(function(){ 
    alert('test'); 
  });
});

You see, it has to be inside the callback. You can’t bind to the submit button if it’s not in the DOM yet. You could also do something along the lines of: $("#someForm").submit(function() { ... });