为什么 jQuery ui selectable 插件禁用了我原来绑定的点击功能

Question

jquery.ui-selectable当我附加到一行时，我的正常点击有问题jquery-ui-selectable 可以正常工作，但我的附加点击不起作用我读过某处要做的事e.metaKey = false; //true i did both, but did not work我的代码在 jsfiddle 中看起来像这样 $('#selectable').selectable({filter:'li'})/* $('#selectable').bind("mousedown", function (e) {           e.metaKey = true; }).selectable() */   $('#selectable li').bind("click", function (e) {    alert('clicked item : '+$(this).text());});问题：我希望我的附件click能像我们期望的那样正常工作。这是演示： http: //jsfiddle.net/eabangalore/71xvp5ko/我的项目中有类似的代码，但点击不起作用注意：我希望我的答案在 jsfiddle 中有效，这里的片段有效不知道为什么，我的项目无效

Answer 1

如果你想要实际的click功能，那么你需要添加pointer-events:none到这个类ui-selectable-helper，这样点击事件就不会bubbling发生。

现场演示：

$('#selectable').selectable({

  filter: 'li',

})

$("#selectable > li").on('click',function() {

  console.log($(this).text());

});

#feedback {

  font-size: 1.4em;

}

#selectable .ui-selecting {

  background: #FECA40;

}

#selectable .ui-selected {

  background: #F39814;

  color: white;

}

#selectable {

  list-style-type: none;

  margin: 0;

  padding: 0;

  width: 60%;

}

#selectable li {

  margin: 3px;

  padding: 0.4em;

  font-size: 1.4em;

  height: 18px;

}

.ui-selectable-helper {

  pointer-events: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<ol id="selectable">

  <li class="ui-widget-content">Item 1</li>

  <li class="ui-widget-content">Item 2</li>

  <li class="ui-widget-content">Item 3</li>

  <li class="ui-widget-content">Item 4</li>

  <li class="ui-widget-content">Item 5</li>

  <li class="ui-widget-content">Item 6</li>

  <li class="ui-widget-content">Item 7</li>

</ol>

您可以简单地使用插件的选定方法jQuery selectable- 无需执行其他操作bind或功能即可根据需要click获取单击的项目text() 。li

现场工作演示：

$('#selectable').selectable({

  filter: 'li',

  selected: function(event, ui) {

    var selectedLi = $(ui.selected).text()

    console.log(selectedLi); //clicked li item text

  }

})

#feedback {

  font-size: 1.4em;

}

#selectable .ui-selecting {

  background: #FECA40;

}

#selectable .ui-selected {

  background: #F39814;

  color: white;

}

#selectable {

  list-style-type: none;

  margin: 0;

  padding: 0;

  width: 60%;

}

#selectable li {

  margin: 3px;

  padding: 0.4em;

  font-size: 1.4em;

  height: 18px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<ol id="selectable">

  <li class="ui-widget-content">Item 1</li>

  <li class="ui-widget-content">Item 2</li>

  <li class="ui-widget-content">Item 3</li>

  <li class="ui-widget-content">Item 4</li>

  <li class="ui-widget-content">Item 5</li>

  <li class="ui-widget-content">Item 6</li>

  <li class="ui-widget-content">Item 7</li>

</ol>