Databases
StackOverflow2013
Postsdbo
POJquery wrong event
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery wrong event
    text
    copied!<p>So I have an interesting problem.</p> <p>I have this html code (pardon the inline styling, it works best for the website):</p> <pre><code>&lt;div id="videopage"&gt; &lt;div class="videoframe" source="http://www.youtube.com/embed/8Kb6xcyclPU?rel=0" style="float:left;width:135px;height:101px;border:5px solid #555;border-radius:5px;position:relative;background:#555555;"&gt; &lt;img style="position:absolute;cursor:pointer;" src="/wp-content/themes/casterconcepts/images/vid-thumbs/casters-and-wheels.jpg" /&gt;&lt;div class="close" style="width: 40px;height: 40px;border-radius: 20px;background: #9b9b9b;opacity: 0.5;position: absolute;bottom: -20px;right: -20px;color: white;text-align: center;line-height: 38px;font-size: 35px;opacity:0;display:none;cursor:pointer;"&gt;&amp;#10006;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And this javascript code:</p> <pre><code>$(function(){ $("#videopage .videoframe").click(function(){ var source = $(this).attr("source"); $(this).children("img").animate({opacity:0},300) .parent().delay(500).animate({width:"400px",height:"300px"},500).append('&lt;iframe style="opacity:0;" width="400" height="300" src="'+source+'" frameborder="0" allowfullscreen="" &gt;&lt;/iframe&gt;') .children("iframe").delay(1300).animate({opacity:1},500) .parent().children(".close").delay(1800).css("display","block").animate({opacity:0.5},300); alert("open event"); }); $("#videopage .close").hover(function(){ $(this).stop().animate({opacity:0.8},150); },function(){ $(this).stop().animate({opacity:0.5},150); }); $("#videopage .close").click(function(){ alert("close event"); $(this).animate({opacity:0},{duration:300,complete:function(){ $(this).css("display","none"); } }); }); }); </code></pre> <p><a href="http://jsfiddle.net/3E8RF/" rel="nofollow">jsFiddle Here</a></p> <p>Essentially, when you click the div, the video opens up and everything is fine. The "first" event is fired.</p> <p>The problem is, when you click the close button and try to fire the "second" event, the "first" event is ALSO fired.</p> <p>So when clicking the close button and the jquery event with the selector "#videopage .close" is fired, the event "#videopage .videoframe" is ALSO fired.</p> <p>This should not be. The only event being fired when clicking the close button is the "#videopage .close".</p> <p>Any ideas why?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload