0

下面的代码在屏幕上创建了一个按钮，当单击时，它会动态创建新的 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>
4

2 回答 2

3

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

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);
        }
    });
});

请注意，上面的代码甚至不会将单击应用到通过单击 a 创建的项目.dynamic，理想情况下，新项目的创建应该被分解到它自己的方法中。

于 2013-05-30T05:43:58.230 回答
0

尝试在 jQuery中将 .on()用于动态元素

 $(document).on("click","#master",function()..
 .........
于 2013-05-30T05:18:57.883 回答