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

Question

那是一个很难解释的标题。

我得到以下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>

使用以下JS：

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

应该发生什么：当我单击元素输入的按钮之一时，不应发生切换。

会发生什么：$（this）始终是父div requestItem。 我知道这可能是一个正常问题，因为requestItem包裹在按钮周围，但是，我需要知道是否单击了按钮，因为我不想再切换幻灯片。

提前致谢！

之后的帮助：这就是我最终得到的：希望它也能帮助其他人。

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

Answer 1

您应该使用event.target

工作的jsfiddle： http : //jsfiddle.net/pr7e9wqq/1/

基本上，由于您的侦听器位于包含元素div.requestitem ，因此回调函数的this上下文。 输入上的click事件冒泡到包含元素（您正在监听）。 请记住， this将始终设置为与选择器匹配的元素。

Answer 2

默认情况下， this在jQuery click处理程序中返回的是它绑定到的元素（在本例中为.requestItem ）。 要获取被点击的元素，请使用e.target ：

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

小提琴： http : //jsfiddle.net/c6zbwq03/