Question

I have recently collapsed my site into one big .JS file and one big .CSS file (while i was building it I had all the JS and CSS on seperate pages to make it easier.)

Now I have them all together the CSS is working great, but the .JS isnt. And it’s to do with this damn .ON statement. The .JS works fine before I ajax load a page inside the “main” div, but once I load I cant get anything out of it.

currently I have the html set up:

<div id="main">
<div id="customerForm" class="Admin">
<div id="tabSection">
<a class="tab selected"></a>
</div>
</div>
</div>

And I am trying to get the .ON statement working with the a.tab with:

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

But it is not giving me any response. Any ideas? Is there a surefire way of knowing what will respond and what won’t respond with .ON? How can I tell? :S

Answer 1

The problem is because you are binding the .on statement to #customerForm.Admin which if what you say is correct is being replaced after your AJAX call. You need to change the binding to be higher up in the DOM tree, above the point of the replacement.