Jquery可嵌套插件项单击事件不起作用答案

【问题标题】：Jquery nestable plugin item click event not workingJquery可嵌套插件项单击事件不起作用
【发布时间】：2017-10-22 21:42:15
【问题描述】：

我正在使用 jquery nestable。一切正常，除了一件事：我想在每个项目上添加鼠标点击事件，如下所示：

   <li class="dd-item" data-id="1" onclick="doWork();">
        <div class="dd-handle">Item 1</div>
   </li>

和我的代码 java 脚本：

<script type="text/javascript">
   function doWork() {
     alert('clicked');
   }   
</script>

但它不起作用。没有语法错误。插件似乎被禁用或我配置错误。

【问题讨论】：

标签： jquery jquery-click-event

【解决方案1】：

如果您使用插件，则 html 可能会在 DOM 加载后由插件动态生成，因此请使用 delegated events:

 <li class="dd-item" data-id="1">
        <div class="dd-handle">Item 1</div>
   </li>

在 jquery 中：

$(document).on("click",".dd-item",function(){
     alert("clicked");
})

【讨论】：

是的，我做到了。我的代码包括一些其他功能，这些功能与一些 html 元素结合在一起，除了上面的事件之外，所有这些功能都可以正常工作。我不知道为什么。我看到了萤火虫，没有错误兄弟。跨度>
它不起作用，因为可嵌套的点击事件与折叠按钮一起使用

【解决方案2】：

我遇到了这个问题，我解决了：

var clickData = {};
$(document).on('mousedown', '.dd-dragel > li', function(e){
    clickData.timer = (new Date()).getTime();
    clickData.x = e.pageX;
    clickData.y = e.pageY;
}).on('mouseup', '.dd-list .dd-item', function(e){
    let n = (new Date()).getTime() - clickData.timer;
    if(clickData.x === e.pageX && clickData.y === e.pageY && n < 200){
        console.log('clicked');
    }
});

【讨论】：