为什么用跨度来处理“单击，按钮”呢？

Question

I'm experiencing something that seems quite wrong with events and jquery .

I have the following simple HTML list

<ul>
  <li><button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button> Chocolate</li>
  <li><button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button> Butter</li>
  <li><button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button> Milk</li>
  <li><button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button> ugar</li>
</ul>

and the following JavaScript:

$(document).on("click", "button", function(evt) {
  console.debug("got a click in", evt.target);
});

When I click in a button I get

got a click in <span class="glyphicon glyphicon-minus-sign"></span>

and not in the button.

Why?

Answer 1

The target property of event objects points to the originator of the event; here, it's the element that was the first target of the click, and that was apparently the <span> .

If you want the element selected by .on() , jQuery provides it as this .

$(document).on("click", "button", function(evt) {
    console.debug("got a click in", this);
});

(Note that you don't have to wait for $(document).ready when using delegation rooted in document .)

Answer 2

Any element can receive a click event. If it doesn't handle it the event will "bubble up" through parent elements.