动态 hide/show 无法使用 .on

Question

已经尝试环顾四周，但被我的一个动态触发器卡住了。

我已经检查了与此相关的其他线程，但似乎还有一些其他代码错误可能导致建议的 .on 方法失败。

代码旨在 hide/show 2 分开 - 有一些初始预渲染的，还有一些之后动态加载的。

预渲染没问题，动态的不行

Jquery:

   $("div .flipper_link").on("click", function () {

             $(this).parent().find(".contain_content").toggle();
             $(this).parent().find(".card-tags").toggle();

        });

以及动态创建的代码：

 <div class="callout_surround">
                        <div class="callout ct_shop">
                            <div class='header-global header-shop'>Shop</div>
                            <div class="flipper_link header-shop"><i class="fi-loop"></i></div>


                            <div class='contain_content' uid="74" data-popup-open="popup-1">
                                <img src='images/someimage.jpg' class='img_cont'/>

                                <div class='tile-text-cont'>

                                    <div class='tile-desc'>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non scelerisque

                                    </div>
                                </div>
                            </div>
                            <div class="card-tags">Some tags etc</div>

                        </div>

                    </div>

我是 jQuery 的新手，如果我使用了错误的方法，请见谅！

Answer 1

对于动态 HTML 使用 jquery on() 方法，例如：

$(document).on("click",".flipper_link", function(){
    // do some thing here
});

Answer 2

解决它的一个简单方法是将您的 javascript 更改为：

<script>
function flipValues(div) {
     $(div).parent().find(".contain_content").toggle();
     $(div).parent().find(".card-tags").toggle();
}
</script>

更改动态生成的 html 以单击 div 进行翻转。

示例：

    <div class="flipper_link header-shop"  onclick="flipValues(this);">
           <i class="fi-loop"></i>
   </div>

Answer 3

您要附加点击事件的选择器不能是动态的。如果您删除该选择器然后再次添加它，这将删除单击事件或任何 jQuery 事件。

您必须将事件附加到一个选择器，该选择器从一开始就存在，并且始终存在。您不能使用动态添加的或稍后删除的。

幸运的是 jQuery 的 on() 方法让我们有机会指定第二个选择器来缩小范围并实现您想要实现的目标。以前使用 live() 来实现这一点，但新的方式更快。如果您使用的是 jQuery 的旧版本，您可能需要使用 live()。如果这不起作用，请告诉我您的版本。

不建议在标记中使用 onclick 事件，原因有很多，我不会在这里详述。您可以查看 whosebug.com/questions/12627443/jquery-click-vs-onclick，但 .click 已弃用。也不建议将事件附加到主文档，例如 $(document).on()，因为每次有人点击页面上的任何内容时都会触发。

您将把事件放在一个非动态的初始选择器上，然后在第二个参数中引用您的动态选择器，如下所示：

$("#non-dynamic").on("click", ".flipper_link", function () {

您将不得不向您的代码中添加更多代码，或者在您的标记中更高层引用非动态选择器。这是一个工作片段：

$(document).ready(function() {
    $("#non-dynamic").on("click", ".flipper_link", function () {
      $(this).parent().find(".contain_content").toggle();
      $(this).parent().find(".card-tags").toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="non-dynamic">
<div class="callout_surround">
  <div class="callout ct_shop">
     <div class='header-global header-shop'>Shop</div>
         <a class="flipper_link header-shop">
            <i class="fi-loop">Test Link</i>
         </a>
          <div class='contain_content' uid="74" data-popup-open="popup-1">
             <img src='images/someimage.jpg' class='img_cont'/>
             
             <div class='tile-text-cont'>
                <div class='tile-desc'>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non scelerisque

               </div>
           </div>
        </div>
        <div class="card-tags">Some tags etc</div>
    </div>
</div>
</div>

动态 hide/show 无法使用 .on

Dynamic hide/show not functioning with .on

jquery

dynamic-content