AJAX生成内容的Click事件

Question

我的HTML中有一个链接，我想使用jQuery中的click事件来触发。 此内容是使用AJAX生成的。 我知道我应该使用.on ，所以这就是我正在做的。 当我使用以下代码时，我的代码确实会在td上触发：

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

但这应该在addsqty类的锚标记上addsqty 。 我尝试了多种方法，例如将.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

动态内容永远不会发生click事件：为此，您需要在，绑定和委托上使用：我始终喜欢委托。 尝试这个 ：

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

Answer 2

你也可以这样尝试

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

还要更改父div的类名，似乎它们都具有相同的类名。

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