Question

I have this function inside a $(document).ready

$('.roundabout-in-focus').click(function(){
    $(this).css({position:'absolute',height:'300px',width:'400px',left:'120px',top:'-20px'});
});

Which works fine,

The problem is that the element that has '.roundabout-in-focus' class changes because of the plugin when the user clicks to another element.

let say, on document ready

<ul>
<li class="roundabout-in-focus">me first</li>
<li>me next</li>
</ul>

if user clicks to the next <li>

<ul>
<li>me first</li>
<li class="roundabout-in-focus">me next</li>
</ul>

but the click function I wrote at the beginning always applies to the same element, the one that had the class in the first place.

How can I update which element has the class?

Answer 1

$("ul").delegate("li.roundabout-in-focus", "click", function() {
   $(this).css({position:'absolute',height:'300px',width:'400px',left:'120px',top:'-20px'});
});

or just

$('.roundabout-in-focus').live("click", function(){
    $(this).css({position:'absolute',height:'300px',width:'400px',left:'120px',top:'-20px'});
});

sorry I haven’t tested either.. but they should work