Question

有人可以告诉我为什么这段代码：

$('#places-view > tbody').find('td').click(function(evt) {
    var td = $(this),
        input = td.find('input');
        console.log('click');
        console.log(input.attr('disabled'), 'disabled');
        if (! input.attr('disabled')) {
            input.trigger('click');
            console.log('inner click');
        }
})

抛出过多的递归错误......

此致

Answer 1

要防止事件冒泡，请将event.stopPropagation()放入input元素点击事件的处理程序中。

$('#places-view input').click(function(event) {

      // This will prevent the click event from bubbling up and firing
      //    the click event on your <td>
    event.stopPropagation();

      // run the rest of your click code
});

http://api.jquery.com/event.stopPropagation/

编辑： @Pointy 注意到，您可能打算让同一个处理程序同时处理这两个事件，或者至少让td处理程序处于静止状态单击input时会触发。

如果是这种情况，您只需要检查td处理程序是否因点击input而被解雇，如果是，请阻止input.trigger("click")运行：

$('#places-view > tbody').find('td').click(function(evt) {
    var td = $(this),
        input = td.find('input');
        console.log('click');
        console.log(input.attr('disabled'), 'disabled');
        if (! input.attr('disabled')) {
                // If the target of the click was not the input,
                //   then trigger the click on the input
            if( input.not( evt.target ).length ) {
                input.trigger('click');
                console.log('inner click');
            }
        }
});

进行测试的另一种方法是：

if(input[0] != evt.target) {...

这两种方法都假设只有一个input。如果情况并非如此，那么您需要为输入提供一个标识符，以使测试更具体。

Answer 2

当你触发“点击”时，它不是一个单独的事件调度循环 - jQuery将在那里运行处理程序然后。由于您的<input> 你的<td>，因此该事件将会冒泡到<td>本身，在那里它会再次进入该处理程序。

另请注意这一行：

console.log(input.attr('disabled'), 'disabled');

可能不是你想要的 - 我认为这将永远记录“禁用”这个词。也许你的意思是

console.log(input.attr('disabled') + ' disabled');

jQuery，点击事件，过多的递归

2 个答案: