使用SUI與JQuery衝突的解決方法

月神的飛刀發表於2017-12-13

    解決方式:替換jquery的$定義或者替換zepto.js的$定義

    解決方法:

jquery有一個方法叫noConflict() ,可以把jquery的$改掉。
var jq=$.noConflict();
這個時候用jq來代替jquery的$吧。
zepto的符號改掉
window.$$=window.Zepto = Zepto
在zepto里加入這一行程式碼,就可以用$$來代替zepto裡的$了。當然也可以選擇其他符號來代替。

    例如:         

    <script th:src="@{../../../../mobileJs/jquery-2.1.1.min.js}" ></script>
    <script>$.noConflict();</script>
    <script type=`text/javascript` th:src="@{//g.alicdn.com/sj/lib/zepto/zepto.js}"  charset=`utf-8`></script>
    <script>$.init</script>
    <script type=`text/javascript` th:src="@{//g.alicdn.com/msui/sm/0.6.2/js/sm.js}" charset=`utf-8`></script>
    <script type=`text/javascript` th:src="@{//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.js}" charset=`utf-8`></script>

     因為這裡直接去掉了jquery的$定義所以呼叫時應該是這樣的

 function confirm(){
        var form = jQuery("form[name=fileUploadForm]");  //獲取jquery物件 用  jQuery  這是jquery已經定義了的
        var options  = {
            url:`/yd111/mobileFileUpload`,
            type:`post`,
            data:form.serialize(),
            success:function(data){
                //alert(data);//成功執行的方法
                $.toast(data);//zepto物件還是用$
                jQuery(".toast").css("margin-top","75%");
                jQuery(".toast").css("margin-left","0px");
            }
        };
        form.ajaxSubmit(options);
    }


相關文章