JQuery無法綁定可選擇的click事件

Question

這應該非常簡單，但是我無法檢索click事件並在JQuery UI的selectable選項上觸發一個函數。

<div id="a">
<ol id="selectable-a">
  <li class="a-item">1</li>
  <li class="a-item">2</li>
  <li class="a-item">3</li>
  <li class="a-item">4</li>
</ol>
</div>

使用Javascript：

$("#selectable-a").selectable();

$("li .a-item").click(function () {
  console.log("Executing command");
});

但是click事件永遠不會被觸發。

我已經考慮過谷歌。

• 嘗試替換.click(通過.bind('click',但它不會改變任何東西
• 在jquery論壇中，他們提出了這個問題，並且有人給出了調整內部函數的解決方案，這對我不起作用(content.data('selectable')總是未定義的，無論如何）
• 將距離設置為1，意味着用戶需要將鼠標移動1個像素以便觸發事件，這是一個壞主意。
• 這個問題沒有任何令人滿意的答案。 也就是說，我不僅希望在所選項目上獲得點擊事件，而且還在任何項目上。

有關如何解決問題的任何想法？

Answer 1

使用$("li.a-item")代替$("li .a-item")

第一個用a-item類查找li; 第二個在list元素中查找帶有a-item類的元素。

Answer 2

這適用於：

<ol id="selectable-a">
  <li><div class="a-item">1</div></li>
</ol>

對於你的，使用：

$("li.a-item").click(function () {
  console.log("Executing command");
});

甚至只是

$(".a-item").click(function () {
  console.log("Executing command");
});

如果你不在其他地方使用.a-item

Answer 3

如果您使用以下jQuery選擇器，它的工作原理：

$("#selectable-a li").click(function () {
   console.log("Executing command");
});

這樣做的另一個好處是，您不再需要為列表項添加額外的類

示例： http ： //jsfiddle.net/9brPn/1/

Answer 4

自動地，selectable添加一個輔助div來顯示類.ui-selectable-helper的套索。 此輔助div位於鼠標右下方。 我最好的猜測是它是在mousedown上創建的，然后干擾點擊。

我正在努力尋找更好的解決辦法，但就目前而言，我正在使用這個：

.ui-selectable-helper{
  pointer-events:none;
}

此外，將您的選擇器更改為： $("li.a-item")而不是$（“li .a-item”）

[注意代碼中的空格不正確]

[編輯]更好的修復：來自http://api.jqueryui.com/selectable/#option-distance

將選項距離添加到初始化為$("#selectable-a").selectable({distance:10});

Answer 5

我有同樣的問題兄弟！ 我找到了完美的解決方案：

我的代碼是：

$( "#selectable" ).selectable();
$('li.slot').on('click', function() {
    var selected_date = $(this).attr('data');
    console.log('selected item: ' +  selected_date); // open the console to see the selected items after each click
    $('#appointment_start').val(selected_date);
});

現在是：

$( "#selectable" ).selectable({
    selected: function( event, ui ) {
        var selected_date = $(ui.selected).attr('data');
        console.log('selected item: ' +  selected_date); // open the console to see the selected items after each click
        $('#appointment_start').val(selected_date);
    }
});

對我來說它很完美:)