jquery 选择器获取给定 div 中的所有锚元素，无论它们嵌套多深？

Question

suppose some markup such as:

<div id="header">
   <div id="nest-one>
      <a href="#">one</a>
      <div id="nest-two">
         <a href="#">two</a>
         <a href="#">three</a>
       </div>
    </div>
</div>

and I want to tie a single click handler to all of the a tags.

I tried the following, but didn;t seem to work. I know I'm missing something stupid easy, just not sure what it is.

$('#header a').click(function(){alert('on click')});

Answer 1

On this line:

<div id="nest-one>

You've missed the closing double-quote on the id.

Aside from that, make sure any JavaScript referencing HTML elements is in the document ready function and/or after those elements in the source.

Answer 2

Demo

---

EDIT

per BoltClock's point:

This works actually

$('#header a').click(function(){alert('on click')});

Answer 3

Use $.live or $.delgate, this will also bind to any future elements added dynamically to the DOM.

example:

$("#header").delegate("a", "click", function() {
  console.log("%o clicked", this ); // log object in firebug
});