觸發動態構建的新元素

嘗試查看大多數帖子，但尚未解決我的情況。觸發動態構建的新元素

如果頁面上的所有內容都是靜態代碼，在HTML和Javascript下面工作。樣品可以被看作http://jsfiddle.net/adrBJ/

的問題是，如果在< DIV ID =「優惠券摘要」式的內容=「」 > ... </DIV >被動態地從程序內置諸如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 
});

來源

2014-07-16 Kelvin

我建議，綁定點擊事件的Ajax調用，而不是做它的文件準備好後。即在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

來源

2014-07-16 15:43:31 Baga

什麼原因觸發器不能定義在動態內容之前，實際上＃coupon-summary是在頁面生成但是沒有內容時定義的。 – Kelvin

你說得對，向div添加動態內容應該不會影響點擊事件綁定，這是一個簡單的[fiddle here]（http://jsfiddle.net/baga143/8jCHd/）。您可能在創建動態內容方面缺少一些內容。 – Baga

Baga，感謝您的示例，但在您範例中，優化器 - 摘要區域（元素）上的觸發器是在創建頁面時定義的，而不是在頁面加載後創建的動態元素。我認爲困難在於如何編寫和加載腳本來觸發構建的全新元素。是否所有目標元素都需要在構建後重新定義，這意味着我們必須在構建之後加載腳本。 – Kelvin

觸發動態構建的新元素

回答

相關問題