Element event trigger from dynamic content
by KELVIN LEE
HTML
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<body class="ui-mobile-viewport ui-overlay-a">
<section id="home" data-role="page" data-title="Coupon Statistic Summary" class="footer_default header_home ui-page ui-page-theme-a ui-page-active" data-url="home" tabindex="0" style="min-height: 408px;">
<header data-theme="b" data-role="header" role="banner" class="ui-header ui-bar-b">
<h1 class="ui-title" role="heading" aria-level="1">Summary</h1>
</header>
<article data-role="content" class="ui-content" role="main">
<div id="home-content">
<div id="signin" style="display: none;">
<div class="heading">
<img class="signin_logo" src="images/jetso360.png">
<br>
</div>
<div class="frm">
<form action="checklogin.php" name="form" id="form" method="post">
<input type="hidden" name="xcaller" id="xcaller" value="ajax">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="ad_login" id="ad_login" placeholder="Advertiser Login" spellcheck="false" autocomplete="false" value="">
</div>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="password" name="password" id="password" placeholder="Password" spellcheck="false" autocomplete="false" value="">
</div>
<p id="msgBox" style="" class="plain">Redirecting ...</p>
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">Sign In
<input...
JavaScript
/* trigger element from dynamic building */
$(document).ready(function () {
$('#coupon-summary').on('click', 'a[href="#detail"]', function (e) {
e.preventDefault();
alert("coupon-summary click");
console.log("coupon-summary click");
}); // coupon-summary a href click
});