Click event on AJAX generated content

Question

I have a link in my HTML that I want to trigger using a click event in jQuery. This content is generated with AJAX. I know that I'm supposed to use .on , so that's what I'm doing. My code does fire on the td when I use this code:

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

But it's supposed to fire on the anchor tag with the class addsqty . I've tried multiple things like changing the .wider to .wider > a and .wider > .addsqty or simple .addsqty . Why doesn't this work?

Here is my HTML. The AJAX loaded content starts with <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

dynamic content never got the click event : for this you need to use on , bind and delegate: i always prefer Delegate. Try This :

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

Answer 2

You could try in such a way also

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

Change parent div classname also , it seems like both have same class name.

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