Jquery点击事件大于按钮答案

【问题标题】：Jquery Click Event Is Larger Than ButtonJquery点击事件大于按钮
【发布时间】：2014-06-07 19:51:32
【问题描述】：

我在使用 Jquery 点击事件时遇到了一些问题。当我单击按钮时会触发该事件，但当我单击按钮的一侧时它也会触发，这会在我正在构建的应用程序中产生不良影响。我在下面包含了一个 JSFiddle，它演示了这个问题。如果您单击“下一步”按钮的右侧，该事件仍将触发。此外，如果您取出 javascript，此行为就会消失。

JSFiddle

如下所示的Javascript：

$(function() {

$(" #sortable ").sortable({axis: "x", containment: "window"});
$( ".clicked" ).click( function() {

   var sortedIDs = $( "#sortable" ).sortable( "toArray", {attribute: 'custom-cl'} );
   alert(sortedIDs);

   var target = "http://localhost:3000/langs";

   $.ajax({
     type: 'get',
     url: target + '?order='+sortedIDs.join(',') ,
     dataType: 'script'
   }); 
});     
});

关于如何解决此问题并将点击事件包含在按钮中的任何想法？

提前感谢您的帮助！

【问题讨论】：

标签： javascript jquery html css ruby-on-rails

【解决方案1】：

这是因为您的点击处理程序设置在包含按钮的 div 上。如果您只希望按钮元素使用它，请给它一个 id 并设置它。

<div class="clicked"><button id="next" type="button">Next</button></div>

$('#next').click(function(){..});

【讨论】：

【解决方案2】：

这是因为div默认有display:block（父级宽度为100%），你可以直接设置为inline-block：

.clicked {
  display:inline-block;
}

Demo

【讨论】：

也感谢您的解释。我没有意识到使用 div 的默认值。
@mtcrts70 我想你肯定知道.clicked 是一个 div，而不是一个按钮，而且将一个 div 包裹在一个按钮周围应该有一些相关的理由这样做。

【解决方案3】：

改一下

<div class="clicked"><button type="button">Next</button></div>

进入这个

<div><button type="button"  class="clicked">Next</button></div>

试试

【讨论】：

【解决方案4】：

为什么不改成这个：

$( ".clicked button" ).click( function() {

【讨论】：