javascript - On click event only fires once, why? -
i've been having problem past week skipped time.
so jquery code:
jquery(function ($) { $(function () { $('.mpicture').on('click', function (e) { e.preventdefault(); $(this).find('div').bpopup(); }); }); });
i have seen people needed use .live getting work multiple times doesn't code. code connected div isn't visible until image clicked. question is: why doesn't work , need change?
html:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: none;"> <div class="merk"> <table id="tblogo"> <tr> <td> <div id="as" class="mpicture"> <img src="logo's/as.png" id="mpicid" class="mpicmaat"/> <div class="logopopup" style="width: 700px; border: solid; border-color: white; border-width: 5px; border-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: 0 0 10px gray;"> <img src="logo's/as.png" class="merkthumbnail" /> put text here </div> </div> </td> </tr> </table> </div> </div>
if other information needed, feel free ask.
i think have found issue
$(this).find('div').bpopup();
is changing html structure while rendering , not reverting original position.
from:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: none;"> <div class="merk"> <table id="tblogo"> <tr> <td> <div id="as" class="mpicture"> <img src="logo's/as.png" id="mpicid" class="mpicmaat" /> <div class="logopopup" style="width: 700px; border: solid; border-color: white; border-width: 5px; border-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: 0 0 10px gray;"> <img src="logo's/as.png" class="merkthumbnail" /> put text here </div> </div> </td> </tr> </table> </div> </div>
to:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: block;"> <div class="merk"> <table id="tblogo"> <tbody><tr> <td> <div id="as" class="mpicture"> <img src="logo's/as.png" id="mpicid" class="mpicmaat"> // removed here </div> </td> </tr> </tbody></table> </div> </div> // , added here <div class="logopopup" style="width: 700px; border: 5px solid white; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: gray 0px 0px 10px; left: -115.5px; position: absolute; top: 127px; z-index: 9999; opacity: 0; display: none;"> <img src="logo's/as.png" class="merkthumbnail"> put text here </div>
Comments
Post a Comment