Question

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

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

问题是如果＆lt; div id =“coupon-summary”style =“”＆gt; ...＆lt; / div＆gt; 中的内容是从程序中动态构建的，例如调用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
});

Answer 1

我建议，在ajax调用之后绑定到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

触发动态构建的新元素

1 个答案: