Javascript 点击事件只触发一次，为什么？_Javascript_Jquery

Javascript 点击事件只触发一次，为什么？

javascript jquery

Javascript 点击事件只触发一次，为什么？,javascript,jquery,Javascript,Jquery,过去一周我一直有这个问题，但这次我跳过了这是我的jQuery代码： jQuery(function ($) { $(function () { $('.mPicture').on('click', function (e) { e.preventDefault(); $(this).find('div').bPopup(); }); }); }); 我已经看到人们需要使用.live来让它多次工作，

过去一周我一直有这个问题，但这次我跳过了

这是我的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>

<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>


把你的文字放在这里

如果需要任何其他信息，请随时询问。

我想我已经找到了问题所在

$(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: 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>


把你的文字放在这里

至：

    <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: 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>


//从这里移除
//加在这里
把你的文字放在这里

您应该在父

div

上绑定“click”事件，因为正如您所说的，只有单击图像后才能看到

div

：如果不存在任何

元素，则无法在该元素上绑定EventListener。在本例中，代码如下所示：
$('#tbLogo').on('click', '#test', callbackFunction)

或
@errad提供的参考文件：
您还可以添加HTML吗？我已经尝试过：$（'.mPicture'）。在（'click'，function（）{$（this.find（'div'）.bPopup（）；}）上并没有起作用……您应该在父div
上绑定“click”事件，因为正如您所说的那样，div
在单击图像后不可见：如果任何元素上不存在EventListener，则无法绑定该元素上的EventListener。在本例中，代码类似于$（'#tbLogo'）。在（'click'，'test'，callbackFunction）
或$（'#tbLogo'）。在（'click'，'mPicture'，callbackFunction）
。您应该了解有关DOM的更多信息。@jh kaiz:这是答案-因此将其从注释移动到解决方案；）对于Sj03rs，请检查：我认为onclick启动正常，但onclick中的代码可能导致了问题。我也不认为这是因为事件委托，您可以始终将事件分配给不可见的元素。只有在创建新元素时才需要事件委派。您的意思是jQuery代码可以这样做，还是我们需要将其更改为这样。