gpt4 book ai didi

javascript - 触发动态构建的新元素

转载 作者:行者123 更新时间:2023-11-28 01:08:23 25 4
gpt4 key购买 nike

尝试查看大多数帖子,但尚未解决我的问题。

如果页面上的所有内容都是静态代码,则以下 HTML 和 Javascript 有效。样本可查看http://jsfiddle.net/adrBJ/

问题是,如果

...
中的内容是通过调用 ajax 等程序动态构建的,则点击事件不会被触发。

如何编码并触发点击事件?

HTML 代码

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

Javascript

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

最佳答案

我建议,在 ajax 调用后绑定(bind)到 click 事件,而不是在文档就绪时执行此操作。即在 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

关于javascript - 触发动态构建的新元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24784878/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com