Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Julian Aramburu
Julian Aramburu
11,368 Points

I'm having problems with .load() and jquery.

Hi! Im having problems with the .load() method and some JQuery I wanna run when the load occurs.

I'm loading a new section in the index when clicking a link. This new section has 1 link with a background that must change when you hover it. In the index file I have placed a call to my jquery file but the hover is not taking action when I load the new section, but it does if I place the code inside the new section file.

My code:

The index:

<body>
<a href="#" id="newsection">Link</a>
<div id="main">
</div>
</body>
<script src="js/jqery.js"></script>
<script src="js/myscripts.js"></script>

The JQuery:

$("#portfolio").click(function(event){
  event.preventDefault();
  $("#main").load("portfolio.html");
});

$("#boton1").hover(function(){
        $("#boton1").css("background-position","-250px 0");
        },
        function(){
          $("#boton1").css("background-position","0 0");
        }      
        );

The new section:

<div id="portfolio">
   <a href="#" id="boton1"></a>
</div>
Andrew Robinson
Andrew Robinson
16,372 Points

the id on the button is #button1 but you're doing $("#boton1").hover( ?

Julian Aramburu
Julian Aramburu
11,368 Points

HI! Sorry I forgot to change that! the correct id is #boton1

1 Answer

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Well... I got it working with the next code:

$('#main').on('mouseover','#boton1',function(){
  $('#boton1').css('background-position','-250px 0');
}).on('mouseout',function(){
  $('#boton1').css('background-position','0 0');  
});