Wordpress和JS冲突

Question

Firstly here's the URL: http://isotopethemes.com/js-conflict/community-listings/naples/

I'm using Savant Theme to build a website, in the above page I use BedStax to get list of areas. To get list of areas I use the following code as custom field:

<!--<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>

The issue is wherever there this code generates list of areas all JS on the page stops working, on the above linked page the search bar pop slide down does not work. On this page: http://isotopethemes.com/js-conflict/about-2/ click the search bar and it slides down, same with the plus symbol on the top right corner.

I've looked into the console and get this error: Uncaught TypeError: this.on is not a function (line 16 jquery.min.js).

I've been struggling for days, I can give you the wp-login id and password if you want, any help would be appreciate :)

Answer 1

Update

This ended up being (after chatting for a minute) the jquery version. Updating to 1.7 proved to be the solution. (NOTE: 2.0.1 would break it again, so 1.7 was the sweet spot).

We left the encapsulation in the code, so I'm leaving it in the answer as well.

---

Try encapsulating your jquery and see if that helps at all.

(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);