jQuery可拖动功能导致PrimeFaces JSF页面出错答案

【问题标题】：jQuery draggable function causes error in PrimeFaces JSF pagejQuery可拖动功能导致PrimeFaces JSF页面出错
【发布时间】：2019-07-01 06:49:04
【问题描述】：

我在 JSF 中使用 jQuery 来制作拖放功能。可拖动功能独立工作正常，但在JSF页面中时，它会抛出错误！

代码如下：

function attachClickEvents() { 
    $(".circle").on('click', function(event){ 
        event.stopPropagation(); 
        event.stopImmediatePropagation(); 

        $(".circle").each(function(){ 
            $(this).removeClass("selected"); 
        }); 

        $(this).addClass("selected"); 
        // $(this).draggable({containment:'parent',drag: handleDragStop}); 
        $(this).draggable({containment:$(this).parent().parent().parent()}); 
    });     
}

令人惊讶的是，$(this).addClass("selected"); 工作正常，并且该标记的外观发生了变化。

但是下一条语句抛出错误：

未捕获的类型错误：$(...).draggable 不是函数

我正在使用 JSF 推荐的包含 jQuery 的方式：

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />

怎么了？

【问题讨论】：

您的问题的代码中没有 jsf/PrimeFaces 相关的内容。请发minimal reproducible example，发布版本错误并将错误的“通用部分”发布到搜索引擎中
google.com/…

标签： javascript jquery jsf primefaces

【解决方案1】：

问题是我在我的代码中明确添加了一个 jquery 版本。另一个独立工作的开发人员也包括另一个版本的 jquery。三个都是矛盾的。我删除了 jquery 的显式包含，并包含了 prime faces 提供的那个，它开始工作了。始终确保您没有多次包含不同版本的 jquery。希望这对某人有所帮助

【讨论】：