Question

我在Jquery点击事件中遇到了一些问题。当我点击按钮时会触发该事件但是当我点击按钮的一侧时它也会触发，这会在我建造的应用程序中产生不良影响。我在下面包含了一个JSFiddle来演示这个问题。如果您点击＆＃39;下一步＆＃39;的右侧按钮事件仍将触发。此外，如果您取出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'
   }); 
});     
});

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

提前感谢您的帮助！

Answer 1

那是因为你的点击处理程序是在包含按钮的div上设置的。如果你只想要它的按钮元素，给它一个id并将其设置为。

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

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

Answer 2

这是因为div默认情况下display:block（父级的宽度为100%），您可以将其设置为inline-block：

.clicked {
  display:inline-block;
}

Demo

Answer 3

更改此

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

进入这个

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

并尝试

Answer 4

为什么不改变这个：

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

Jquery Click事件比按钮大

4 个答案:

Demo