How to run jquery when click submit with php javascript widget - php

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() { ... });