Question

下面的代码在屏幕上创建了一个按钮，点击后，它会动态创建新的Div。经过一定次数的点击后，它会删除所有新创建的Div。

问题：我想让新创建的Div也可以点击，这样他们就可以创建新的Div。为什么以下功能不起作用？

$('.dynamic').click(function()

完整的代码如下。继续尝试吧。

   <html>    
    <head>
        <style>
            .dynamic {
                color:blue;
                font-size:18px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.10.0.js"></script>
    </head>    
    <body>
        <div>
            <button id="master">click this</button>
        </div>
        <script language="Javascript" type="text/javascript">
            $(document).ready(function() {
                $('#master').click(function() {
                    if ($('.dynamic').length > 4) {
                        $('.dynamic').remove();
                    } else {
                        var divCount = Number($('.dynamic').length + 1);
                        $(this).before('<div class="dynamic">Dynamic Div ' + divCount + '</div>');
                    }
                });

                $('.dynamic').click(function() {
                    var divCount = Number($('.dynamic').length + 1);
                    $(this).before('<div class="dynamic">Dynamic Div ' + divCount + '</div>');
                });    
            });
        </script>
    </body>

</html>

Answer 1

它不起作用，因为您在项目存在之前已准备好文档中的事件。您需要在项目创建后将事件附加到项目中。

jsFiddle

$(document).ready(function () { $('#master').click(function () { if ($('.dynamic').length > 4) { $('.dynamic').remove(); } else { var divCount = Number($('.dynamic').length + 1); var newItem = $('<div class="dynamic">') .addClass('dynamic') .text('Dynamic Div ' + divCount) .click(function () { var divCount = Number($('.dynamic').length + 1); $(this).before('<div class="dynamic">Dynamic Div ' + divCount + '</div>'); }); $(this).before(newItem); } }); });

请注意，上述代码甚至不会将点击应用于通过点击.dynamic创建的项目，理想情况下，新项目的创建应该考虑在自己的方法中。

Answer 2

尝试在jQuery中使用.on()来获取动态元素

 $(document).on("click","#master",function()..
 .........

JavaScript：使动态类可点击 - 为什么不工作？

2 个答案: