动态隐藏/显示不适用于 .on

Question

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

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

代码旨在隐藏/显示 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

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

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

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

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

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

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

您将不得不向您的代码中添加更多代码，或者在您的标记中引用更高的非动态选择器。这是一个有效的 sn-p：

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

Answer 3

修复它的简单方法是将您的 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>