Response title
This is preview!
Complete jQuery newb, how do I make sure my event functions after the first time?
in Using jQuery
•
11 years ago
I have html setup like this...
<div id="videodock" class="videodock">
<div class="videodock-container">
<a href="_blank" id="someid1" class="videodockitem"><span>linktext</span><img src="images/someimage1" alt="alt1" /></a>
<a href="_blank" id="someid2" class="videodockitem" href="#"><span>linktext2</span><img src="images/someimage2" alt="alt2" /></a>
<a href="_blank" id="someid3" class="videodockitem"><span>linktext3</span><img src="images/someimage3" alt="alt3" /></a>
</div>
</div>
And I have my jQuery setup as best I could determine like so...
$(document).ready(function() {
$(".videodockitem").bind('click', function(e) {
var id = $(this).attr('id'); // this is the clicked link's id attribute
e.preventDefault();// Stop the browser from going to the page
//Load Videos based on click
if(id == 'someid1') {
$("#player").replaceWith($('#vid1'));
$("iframe").attr({class : "player"});
$('.videodockitem').bind('click');
return false;
}
else if(id == 'someid2') {
$("#player").replaceWith($('#vid2'));
$("iframe").attr({class : "player"});
$('.videodockitem').bind('click');
return false;
}
else if(id == 'someid3') {
$("#player").replaceWith($('#vid3'));
$("iframe").attr({class : "player"});
$('.videodockitem').bind('click');
return false;
}
else {
alert("Congratulations, You broke it!");
return false;
}
The elements which are being clicked are part of the mac style dock used here http://ndesign-studio.com/blog/css-dock-menu, I don't know if that's important or not, like I said total newb. My intent is to have an iframe with a youtube video be replaced with a new video iframe when the link is clicked. I am thinking I have to replace the iframe name as soon as the event fires so the next event can find a target, which is why I have the "$("iframe").attr({class : "player"});" command in there. Also the iframes being called to replace the current iframe are stored in hidden divs on the page, I don't think that's the most effective way to go about it but I couldn't figure any other way to do it. The biggest problem I have is the event doesn't work after it's called once. I've looked over the jQuery tutorial on the FAQ of why do my events stop working after an AJAX request but I'm clearly missing something here. Any advise would be appreciated, I really don't know what I'm doing here insofar as how jQuery commands, and functions can be chained together, so I'm quite sure there's a big problem number 1. Any advise is appreciated, or any links to good "really stupid people texts for doing complex things" type of reads on jQuery. Thanks!
1