AJAX生成コンテンツのクリックイベント

Question

jQueryでclickイベントを使用してトリガーしたいHTMLにリンクがあります。このコンテンツはAJAXで生成されます。私は.onを使うはずですので、それは私がやっていることです。

$(".onestepcheckout-summary").on("click", ".wider", function() { 
     alert('success'); 
     return false; 
    }); 

しかし、クラスaddsqtyでアンカータグに発射することになっています：私はこのコードを使用するときに私のコードはtd火災ありません。 .widerを.wider > aと.wider > .addsqtyに変更するか、または.addsqtyに変更するなど、複数のことを試しました。なぜこれは機能しませんか？

ここは自分のHTMLです。 AJAX読み込みコンテンツは<table class="onestepcheckout-summary">で始まります。

<div class="onestepcheckout-summary"> 
<table class="onestepcheckout-summary"> 
    <thead> 
     <tr> 
      <th class="name" colspan="2">Artikel</th> 
      <th class="qty">Stück</th> 
      <th></th> 
      <th class="total">Zwischensumme</th> 
     </tr> 
    </thead> 
     <tbody> 
     <tr> 
     <td class="name"> 
      Simpel product     </td> 
     <td class="editcart"> 
      <a href="#" class="subsqty" name="substract">-</a> 
     </td> 
     <td class="qty" nowrap=""> 
       <input type="hidden" value="5" id="qty_46" name="cart[46][qty]" class="qtyinput" size="1"> 
       5  </td> 
     <td class="editcart wider" nowrap=""> 
      <a href="#" class="addsqty" name="add">+</a> 
     </td> 
     <td class="total"> 
         <span class="price">€ 10,00</span>     </td> 
    </tr> 
    </tbody></table> 

<table class="onestepcheckout-totals"> 
    <tbody><tr> 
    <td style="" class="a-right" colspan="1"> 
     Zwischensumme </td> 
    <td style="" class="a-right"> 
     <span class="price">€ 145,00</span> </td> 
</tr> 
    <tr> 
    <td style="" class="a-right" colspan="1"> 
     <strong>Gesamtbetrag</strong> 
    </td> 
    <td style="" class="a-right"> 
     <strong id="total-price"><span class="price">€ 145,00</span></strong> 
    </td> 
</tr> 
</tbody></table> 

</div> 

Answer 1

動的なコンテンツは、クリックイベントをやったことがなかった：あなたは、バインドとデリゲートを上使用する必要があり、このため ： 私は常に委任を好みます。これを試してみてください。

$("body").delegate(".wider", "click", function() { 
    alert('success'); 
    return false; 
}); 

Answer 2

あなたは親のdivクラス名も、それは両方のように思える

$(document).on("click", '.onestepcheckout-summary',function (event) { 
// whatever u want ... 
}); 

変更と同じクラス名を持っても、このような方法で試みることができます。

  <div class="div-class"> 
       <table class="table-class"> 
       ...... 
       </table> 
      </div> 
    $('.div-class').on("click", '.onestepcheckout-summary',function (event) { 
    // whatever u want ... 
});