Question

我有一个复选框，允许用户显示/隐藏某些功能。因此，我有2个具有单独ID的div，一个div直接添加到了我的代码中，第二个div是通过CSS display:none通过插件动态添加的。

$(function() {
  $("#chkstatus").click(function() {
    if ($(this).is(":checked")) {
      $("#dv").show();
      $("#Add").hide(); //dynamic div
    } else {
      $("#dv").hide();
      $("#Add").show(); //dynamic div
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dv" class="forgo">
  <h1>Benefits</h1>
  <p></p>
</div>

<!-- The below code is not visible in the page source but visible in inspect element -->

<div id="Add" class="form-group" style="display:none">
  <input class="btn-block button" type="button" style="" value="Upload File">
</div>

问题是显示/隐藏在#dv上运行正常，但是#Add没有任何反应。它始终保持隐藏状态。

有人可以让我知道如何使动态添加的div的显示/隐藏工作吗？

Answer 1

应该将事件侦听器绑定到动态创建的div上，而不是在父对象上添加一个事件侦听器（例如<div id='cont'></div>），该事件侦听器自然是静态的。

说我们正在监听的事件是click，现在每当单击父级时，您都具有对特定div的引用（即使有很多这样的动态div）作为该事件的目标属性。您可以通过在控制台日志中挖掘输出来找到。

为什么和如何??

这是因为事件委派和事件冒泡，即事件冒泡到父div并继续冒泡到DOM树中的主体。因此，在这种情况下，由于事件是在不同元素上的click（checkbox）（动态添加的div没有父子关系），因此我们可以使用trigger在父div上触发我们自己的自定义事件。 / p>


    $(document).ready(function () {
        $("#cont").on('myEvent1',function(){
            $(this).find('#dv').show();
            $(this).find('#Add').hide();  
        });
        $("#cont").on('myEvent2',function(){
            console.log($(this)); // This will o/p the #cont div containing both the static and dynamic div in it.   
            $(this).find('#dv').hide();
            $(this).find('#Add').show();  
        });
        $("#chk").change(function () {
            if ($(this).is(":checked")) {
                console.log($(this)); // This will o/p the checkbox element 
                $("#cont").trigger('myEvent1');

            } 
            else {
                $("#cont").trigger('myEvent2');
            }
        });
    });

您可以尝试根据自己的实际目的进行模制，也可以使用toggle来降低LOC。

Answer 2

您不能像这样使用#Add div。.在文档就绪状态下编写的脚本不知道#Add div存在。因此您必须将click事件移至插件活动部分。您应该在添加div的部分之后添加事件。

更新：不好。我忘记了这与将某些功能绑定到动态元素无关。如我们所见，它正常工作（http://jsfiddle.net/8so2wkbp/）..所以还有其他问题

jQuery的显示/隐藏不适用于动态创建的div

2 个答案: