點擊事件僅觸發一次，為什么？

Question

過去一周我一直遇到這個問題，但是這次我只是略過了。

這是我的jQuery代碼：

jQuery(function ($) {
    $(function () {
        $('.mPicture').on('click', function (e) {
            e.preventDefault();
            $(this).find('div').bPopup();
        });
    });
});

我已經看到人們需要使用.live才能使其多次運行，但這對此代碼沒有任何作用。 此代碼連接到div，直到單擊圖像后該div才可見。 所以我的問題是：為什么這不起作用，我需要更改什么？

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 your text here
                  </div>
               </div>
            </td>
          </tr>
      </table>
   </div>
</div>

如果需要其他信息，請隨時詢問。

Answer 1

我想我已經找到問題了

$(this).find('div').bPopup(); 

在渲染時更改了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 your text here
                  </div>
               </div>
            </td>
          </tr>
      </table>
   </div>
</div>

至：

<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 from here 
               </div>
            </td>
        </tr>
      </tbody></table>
   </div>
</div>

// and 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 your text here
</div>

Answer 2

您應該在父div上綁定“ click”事件，因為正如您所說的那樣，只有在單擊圖像之后div才可見：您不能將eventListenner綁定到任何element如果不存在）。 在這種情況下，代碼如下所示：

$('#tbLogo').on('click', '#test', callbackFunction)

要么

$('#tbLogo').on('click', '.mPicture', callbackFunction)

@errand提供的參考文檔： http ://learn.jquery.com/events/event-delegation/