jQuery - Cant Select HIdden Elements

This one is driving me nuts.

Iv written a page, using jQuery, its big to paste here, but ill post a cut down example.

There is a content pane that loads empty.

Then there is three hidden divs, with content for contact details, site details etc.

The idea is when you click a button, I simply swap the contents of the divs into the blank content pane (div) and cleanly slide it in and out.

This all works fine, although here's my problem.

I have a send button on the contact form, but no matter what I try, I cant select it with jQuery.

Iv stripped out all the contact code behind it, and now all im trying to do is pop up an alert box, and I cant even do that.

ie $('.send').click(function() {alert('Something');});

The only conclusion I can come up with is that because the contact panel is hidden when the page loads, its failing to select it.

I add the same "Send" button onto the two other divs, and only the divs' hidden when the page loads fail, the div thats displayed when the page loads first works fine.

Its maybe hard to describe, but take a look at the code at this page: http://cheynewallace.com/custom/about/

Under the experience tab, "this site" tab and the "contact" tab, you can see the first word is a bolded "Send" , this is what im trying开发者_如何转开发 to use. You can see all three "Send" buttons are exactly the same.

So why does it only work on the 1 ? The selector im using will select all classes of .send.

Cheers

Since you change HTML in that block, event binding gets removed. You can use live() method that attach a handler to the event for all elements which match the current selector, now and in the future. In your case it will be something like:

$(".send").live("click", function() {alert("Something")})

Read more here