Wordpress和JS冲突

时间:2015-05-15 22:37:43

标签: javascript jquery ajax wordpress

首先是网址:http://isotopethemes.com/js-conflict/community-listings/naples/

我使用Savant Theme构建网站,在上面的页面中,我使用BedStax获取区域列表。要获取区域列表,我使用以下代码作为自定义字段:

<!--<script type="text/javascript" src="http://www.bedstax.com/realtorData/featuredCommunities.php?state=FL&area=Bonita Springs%20/%20Estero"></script>
//-->
<script type="text/javascript">

var state = 'FL';
var area = 'Naples';
var idx = '583';
var agent = 'xxx';
var domain = 'xxx';

function setCommunity(community,communityName) {

    var cookieSet = window.state + "::" + window.area + "::" + window.idx + "::" + window.agent + "::" + window.domain + "::" + community + '::' + communityName;

    document.cookie='idxCookie=' + cookieSet + '; path=/';
    document.location.href = '/featured-communities-info';
}


jQuery(document).ready(function() {

    jQuery.ajax({
        url:"http://bedstax.com/realtorData/newFeatComm.php?state=" + window.state + "&area=" + window.area + "&idx=" + window.idx,
        dataType: 'JSONP', // Notice! JSONP <-- P
        success:function(json){
            $('.output').html(json);
        },
        error:function(){
            alert("Error");
        },
    });
});

</script>
<div class="output">
</div>

问题是,无论何处此代码生成区域列表,页面上的所有JS都停止工作,在上面的链接页面上,搜索栏弹出向下滑动不起作用。在此页面上:http://isotopethemes.com/js-conflict/about-2/点击搜索栏,它会向下滑动,与右上角的加号一样。

我查看了控制台并收到此错误: 未捕获的TypeError:this.on不是函数(第16行jquery.min.js)。

我已经苦苦挣扎了几天,如果你愿意,我可以给你wp登录ID和密码,任何帮助都会很感激:)

1 个答案:

答案 0 :(得分:3)

更新

这最终成为(在聊了一分钟之后)jquery版本。更新到1.7证明是解决方案。 (注意:2.0.1会再次破坏它,所以1.7是最佳点)。

我们在代码中留下了封装,因此我也将其留在了答案中。

尝试封装你的jquery,看看是否有帮助。

(function($){
    $(function(){  

        $.ajax({
            url:"http://bedstax.com/realtorData/newFeatComm.php?state=" + window.state + "&area=" + window.area + "&idx=" + window.idx,
            dataType: 'JSONP', // Notice! JSONP <-- P
            success:function(json){
                $('.output').html(json);
            },
            error:function(){
                alert("Error");
            }
        });

    });   
})(jQuery);