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

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -