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上下文。您在输入上的点击事件冒泡到包含元素（您正在侦听）。请记住，this将始终设置为与您的选择器匹配的元素。

Answer 2

默认情况下，jQuery单击处理程序返回的this是绑定到的元素（在本例中为.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/

无法通过onclick获得正确的$（this）元素。试图使用：不用于div内的输入

2 个答案: