Question

Okay, I’ve managed to get .on working on a different site, but for some reason it is just being a pain in this one.

here is my code:

$("#tabSection").on("click", "a.tab", function () {
    alert('bob');
});

and the HTML (which will be loaded via jQuery .load():

<div id="tabSection">
    <table border=0 width="750px" cellspacing=0 cellpadding=0>
    <tr><td class="tab"><a href="javascript:void();" rel="details" class="tab selected">Details</a></td>

Obviously I close the table and the tabsection div. It was all working fine before I got it loading via ajax. Now, i cant get it work at all. Any suggestions as to why it wouldnt be? Am i missing something here?

Answer 1

You are loading the #tabSection element, which means that it doesn’t exist when you try to hook up the event.

The element that you hook up the event to have to exist when you hook it up. Use the element where you load the HTML.

$("#customerForm").on("click", "#tabSection a.tab", function () {
  alert('bob');
});