不能绑定click事件在selectable上

JQuery Cannot bind click event on selectable

本文关键字：selectable 事件 绑定 click 不能      更新时间：2023-09-26

这应该是非常简单的，但我无法检索点击事件，并为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像素才能触发事件，这是一个坏主意。
  • 这个问题没有令人满意的答案。也就是说，我不只是想获得选中项目的点击事件，而是任何项目。

你知道如何解决这个问题吗?

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

第一个用a-item类查找li;第二个函数在list元素中查找具有a-item类的元素。

<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

如果你使用下面的jQuery选择器，它可以工作:

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

这有一个额外的好处，你不再需要一个额外的类为列表项

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

可选对象会自动添加一个辅助div来显示类为.ui-selectable-helper的套索。这个辅助div位于鼠标的正下方。我最好的猜测是它是在鼠标按下时创建的，然后干扰点击。

我正在做一个更好的修复，但是现在，我使用这个:

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

同时，将选择器更改为:$("li.a-item") And NOT $("li .a-item")

[注意代码中的空格不正确]

[编辑]更好的修复:从http://api.jqueryui.com/selectable/#option-distance

在初始化中添加选项距离为$("#selectable-a").selectable({distance:10});

我也有同样的问题!我找到了完美的解决方案:

我的代码是: 
$( "#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);
    }
});

对我来说，它工作完美:)

相关文章：