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在单击图像之前是不可见的：你不能在任何{{1}上绑定一个eventListenner如果它不存在。在这种情况下，代码如下所示：

element

或

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

@errand的参考文件： http://learn.jquery.com/events/event-delegation/

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

2 个答案: