Question

I have a script that changes a phone number, but this script will only work with jquery 1.6.4 — it ceased to function once I updated to 1.7.2. What am I missing?

<script type="text/javascript">// <![CDATA[

$('a#reno-trigger').click(function(){
$('#toggle-lv').show();
$('#toggle-reno').hide();
});

$('a#lv-trigger').click(function(){
$('#toggle-reno').show();
$('#toggle-lv').hide();
});



// ]]></script>

HTML:

<div id="toggle-reno"><div class="toggle-switch" >
<span class="active">Las Vegas</span> | <a id="reno-trigger" href="#">Reno</a></div>
<div class="toggle-phone">702.555.5555</div>
</div>

<div id="toggle-lv" style="display: none"><div class="toggle-switch" >
<a id="lv-trigger" href="#">Las Vegas</a> | <span class="active">Reno</span></div>
<div class="toggle-phone">555.555.5555</div>
</div>

I am going to remove this line and the script will no longer work:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

I took out the CDATA as well.

My wordpress is loading a local version of 1.7.2.

<script type='text/javascript' src='http://xxx.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

I’ve added:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

And it works again, but I am loading two jQueries which seems strange.

I guess it isn’t the update of jQuery after all…

The document.ready is implemented now:

<script type="text/javascript">
$(document).ready(
$('a#reno-trigger').click(function(){
$('#toggle-lv').show();
$('#toggle-reno').hide();
});

$('a#lv-trigger').click(function(){
$('#toggle-reno').show();
$('#toggle-lv').hide();
});

);
</script>

That script didn’t work period, I must have screwed up the document.ready part… I’ve put it back for now.

Answer 1

Try this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){

    $('a#reno-trigger').click(function(){
        $('#toggle-lv').show();
        $('#toggle-reno').hide();
    });

    $('a#lv-trigger').click(function(){
        $('#toggle-reno').show();
        $('#toggle-lv').hide();
    });

});
</script>