Question

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

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

但它应该使用类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

动态内容从未获得点击事件：为此你需要使用on，bind和delegate：我总是喜欢代表。试试这个：

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

点击AJAX生成内容的事件

2 个答案: