Javascript 触发动态构建的新元素
试着检查大多数帖子，但还不能解决我的问题 若页面上的所有内容都是静态代码，那个么HTML和Javascript就可以工作。可以查看示例 问题是，如果..中的内容是通过调用ajax等程序动态生成的，则不会触发单击事件 如何编写代码并触发单击事件 HTML代码Javascript 触发动态构建的新元素,javascript,jquery,Javascript,Jquery,试着检查大多数帖子，但还不能解决我的问题 若页面上的所有内容都是静态代码，那个么HTML和Javascript就可以工作。可以查看示例 问题是，如果..中的内容是通过调用ajax等程序动态生成的，则不会触发单击事件 如何编写代码并触发单击事件 HTML代码 <body class="ui-mobile-viewport ui-overlay-a"> <section id="home" data-role="page" data-title="Coupon Statis
<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 type="submit" name="submit" id="submit_btn" value="Sign In"></div>
</form>
</div>
</div>
<div id="coupon-summary" style="">
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"><li class="ui-li-has-count ui-li-has-thumb ui-first-child"><a href="#detail" data-cid="1" data-transition="flow" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="/dev/data/coupons/1.png" style="max-width: 100px;" class="imageview"></a><span class="ui-li-count ui-body-inherit">11</span></li><li class="ui-li-has-count ui-li-has-thumb ui-last-child"><a href="#detail" data-cid="10" data-transition="flow" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="/dev/data/coupons/10.png" style="max-width: 100px;" class="imageview"></a><span class="ui-li-count ui-body-inherit">2</span></li></ul>
</div>
</div> <!-- home-content -->
</article> <!-- article content -->
</section> <!-- section home -->
<section id="detail" data-role="page" data-title="Coupon Statistic Summary" class="footer_default header_home ui-page ui-page-theme-a" data-url="detail" 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">禮券登記統計</h1></header>
<article data-role="content" class="ui-content" role="main">
<div id="reg-detail">Loading ....</div>
</article> <!-- article content -->
</section> <!-- section detail -->
我建议，在ajax调用之后绑定到click事件，而不是在document ready上进行绑定。i、 e.将下面的代码放在ajax调用之后
$('#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
在动态内容之前无法定义触发器的原因是什么，实际上#优惠券摘要是在构建页面时定义的，但没有内容。您是对的，将动态内容添加到div应该不会影响单击事件绑定，这是一个简单的方法。您创建动态内容的方式可能缺少一些内容。Baga，感谢您的示例，但在您的示例中，优惠券摘要区域（元素）的触发器是在页面创建时定义的，而不是在页面加载后创建的动态元素。我认为困难在于如何编写和加载脚本来触发一个全新的内置元素。是否所有目标元素都需要在构建后重新定义，这意味着我们必须在构建后加载脚本。
$('#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