使用onclick无法获得正确的$（this）元素。 尝试使用：not在div内输入

Question

That was one hard title to write with a good explanation.

I got the following html:

 <div class="requestItem clearfix">
       <div class="col-sm-2">Great info goes here yo.</div>
       <div class="col-sm-2">Some info goes here</div>
       <div class="col-sm-2">Date goes here.</div>
       <div class="col-sm-1 pull-right">
            <div class="buttons">
                <div class="row">
                    <input type="button" value="Edit" class="btn dark-button tiny-button"  />
                    <input type="button" value="Delete" class="btn dark-button tiny-button margin-top" />
                    </div>
                </div>
            </div>
            <div class="row extraInfo">
                <div class="col-sm-12"> 
                   some random info
            </div>
        </div>  
  </div>

with the following JS:

$('.requestItem').click(function () {
    console.log($(this));
    if ($(this).is(':input')) {
        alert("input clicked"); return;
    } else { $(this).children('.extraInfo').slideToggle(); }
});

What should happen: When i click one of the buttons which is of element input, the toggle should not happen.

What happens: $(this) is always the parent div, requestItem. I get that this can be a normal problem since the requestItem is wrapped around the button, however, i need to know if the button was clicked since i don't want to toggle a slide then.

Thanks in advance!

AFTER HELP: This is what i ended up with: Hope it helps someone else too.

$('.requestItem').click(function (e) {
    if (!$(e.target).is(':input')) {
        $(this).children('.extraInfo').slideToggle();
    }
});

Answer 1

You should use event.target

Working jsfiddle: http://jsfiddle.net/pr7e9wqq/1/

Basically, since your listener is on the containing element div.requestitem , that is the this context for the callback function. Your click event on the input bubbled up to the containing element (which you were listening on). Remember that this will always be set to the element that matches your selector.

Answer 2

By default, this in a jQuery click handler returns is the element that it's bound to (in this case, .requestItem ). To get the element that got clicked, use e.target :

$('.requestItem').click(function (e) {
    console.log($(e.target));
    if ($(e.target).is('input')) {
        alert("input clicked"); return;
    } else { $(this).children('.extraInfo').slideToggle(); }
});

Fiddle: http://jsfiddle.net/c6zbwq03/