如何解决Jquery noconflict仍然显示$不是原型js的函数

时间:2017-11-01 03:49:19

标签: jquery prototypejs

我是developing a page我必须在noconflict模式下沿着prototypejs使用Jquery。我已经多次成功地将jquery置于冲突模式中,但这次我仍然收到错误

  

TypeError:$不是函数prototype.js:7126:29

这意味着Jquery noconflict仍未发布prototypejs的美元变量。

我试过

<script  src="js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var jQuery=$.noConflict();
</script>

<script src="js/prototype/prototype.js" type="text/javascript"></script>

我得到了同样的错误然后我去了

<script  src="js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>

<script src="js/prototype/prototype.js" type="text/javascript"></script>

最后用

<script  src="js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>

<script src="js/prototype/prototype.js" type="text/javascript"></script>

对于他们每个人,我仍然getting同样的错误。

如何解决Jquery noconflict仍然显示$不是原型js的函数?

2 个答案:

答案 0 :(得分:1)

您正在尝试的代码是正确的。我可以看到这里唯一的问题是  由于某种原因,您加载的jQyery和原型文件中的一个或两个都没有加载。也许道路不正确。尝试使用下面在Code Snippet中给出的CDN,它正如预期的那样工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var $j=$.noConflict();
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js" type="text/javascript"></script>
<div id='mainDiv'>
This is a Div
</div>

<script type="text/javascript">
//prototype js code for selecting Div with id='mainDiv'
console.log($('mainDiv'));

//jQuery document ready function
$j(document).ready(function(){
	console.log('jQuery Document ready Function');
});
</script>

答案 1 :(得分:1)

当您查看Noconflict上的jQuery Documentation时,您会发现在noconflict中,您必须先将jQuery文件一个接一个地对齐,然后将其他库分开。所以

<script  src="js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>

<script src="js/prototype/prototype.js" type="text/javascript"></script>

仅在页面上还有其他jquery文件才是正确的。在noconflict之后你必须立即移动它们。这意味着您最好将所有jquery文件分组到其他库之前的顶部,或者将其他库放在使用jquery的文件之前。

例如,您将拥有类似的内容

<script  src="js/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $.noConflict();
    </script>

<script src="other_jquery_code_or_plugin.js" type="text/javascript"></script>
    <script src="js/prototype/prototype.js" type="text/javascript"></script>