JavaScript: стварэнне дынамічнага класа клікабельнасць - чаму не працуе?

Прыведзены ніжэй код стварае кнопку на экране, і пры націску, яна стварае новы Div дынамічна. І пасля таго, як пэўную колькасць клікаў, выдаляе ўсе зноў створаны Div-х.

Праблема: Я хачу, каб зноў створаны Div таксама інтэрактыўнымі таму яны ствараюць новы Div-х. Чаму наступная функцыя не працуе?

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

Поўны код ніжэй. Ідзем далей і паспрабаваць яго.

   <html>    
    <head>
        
        <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>
0
ды, скрыпка не працуе.
дададзена аўтар Mr_Green, крыніца
ды, скрыпка не працуе.
дададзена аўтар Mr_Green, крыніца
Ён працуе jsfiddle.net/T3ZbL
дададзена аўтар Daniel Imms, крыніца
@ User1883050 Так, няправільна пытанне. Мірыцца адказ цяпер я зразумеў.
дададзена аўтар Daniel Imms, крыніца
@ User1883050 Так, няправільна пытанне. Мірыцца адказ цяпер я зразумеў.
дададзена аўтар Daniel Imms, крыніца
Не. Кнопка працуе, так. Але дынамічна ствараныя Div-й не рэагаваць на пстрычкі - ЦІТ.
дададзена аўтар thanks_in_advance, крыніца
Не. Кнопка працуе, так. Але дынамічна ствараныя Div-й не рэагаваць на пстрычкі - ЦІТ.
дададзена аўтар thanks_in_advance, крыніца

6 адказы

Гэта не працуе, таму што вы падлучаеце падзея ў дакуменце гатовага перад існуюць элементы. Вы павінны прымацаваць падзея да аб'ектаў пасля таго, як яны ствараюцца.

<�моцны> 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);
        }
    });
});

Note that the above code does not apply the click even to the items created by clicking on a .dynamic, ideally the creation of the new items should be factored out into its own method.

3
дададзена
Дзякуй геніяльны чалавек. - ЦІТ.
дададзена аўтар thanks_in_advance, крыніца

Гэта не працуе, таму што вы падлучаеце падзея ў дакуменце гатовага перад існуюць элементы. Вы павінны прымацаваць падзея да аб'ектаў пасля таго, як яны ствараюцца.

<�моцны> 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);
        }
    });
});

Note that the above code does not apply the click even to the items created by clicking on a .dynamic, ideally the creation of the new items should be factored out into its own method.

3
дададзена
Дзякуй геніяльны чалавек. - ЦІТ.
дададзена аўтар thanks_in_advance, крыніца

Гэта не працуе, таму што вы падлучаеце падзея ў дакуменце гатовага перад існуюць элементы. Вы павінны прымацаваць падзея да аб'ектаў пасля таго, як яны ствараюцца.

<�моцны> 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);
        }
    });
});

Note that the above code does not apply the click even to the items created by clicking on a .dynamic, ideally the creation of the new items should be factored out into its own method.

3
дададзена
Дзякуй геніяльны чалавек. - ЦІТ.
дададзена аўтар thanks_in_advance, крыніца

Паспрабуйце выкарыстоўваць .На() ў jQuery для дынамічных элементаў

 $(document).on("click","#master",function()..
 .........
0
дададзена
@harsha гэта для дынамічных элементаў
дададзена аўтар PSR, крыніца
@AnkitJaiswal я на 26 і, здаецца, добра.
дададзена аўтар Daniel Imms, крыніца
@AnkitJaiswal які браўзэр?
дададзена аўтар Daniel Imms, крыніца
@harsha на() з'яўляецца пераважным метадам ў цяперашні час, то ёсць усё. Абодва працуюць у цяперашні час. націсніце() нават не быў састарэлым яшчэ api.jquery.com/click
дададзена аўтар Daniel Imms, крыніца
Гэта не адказ або вырашэнне пытання, проста прапанова. Яна працуе, выкарыстоўваючы .click() .
дададзена аўтар Daniel Imms, крыніца
@PSR: Ці не маглі б вы адукаваць мяне аб розніцы паміж выкарыстаннем націсніце Апрацоўшчык непасрэдна і на
дададзена аўтар Harsha Venkatram, крыніца
@DanielImms ваш скрыпку не працуе, як чакалася. .click() не працуе з элементам, створаны дынамічна JavaScript.
дададзена аўтар Ankit Jaiswal, крыніца
@DanielImms Chrome - Версія 27.0.1453.93
дададзена аўтар Ankit Jaiswal, крыніца

Паспрабуйце выкарыстоўваць .На() ў jQuery для дынамічных элементаў

 $(document).on("click","#master",function()..
 .........
0
дададзена
@harsha гэта для дынамічных элементаў
дададзена аўтар PSR, крыніца
@AnkitJaiswal я на 26 і, здаецца, добра.
дададзена аўтар Daniel Imms, крыніца
@AnkitJaiswal які браўзэр?
дададзена аўтар Daniel Imms, крыніца
@harsha на() з'яўляецца пераважным метадам ў цяперашні час, то ёсць усё. Абодва працуюць у цяперашні час. націсніце() нават не быў састарэлым яшчэ api.jquery.com/click
дададзена аўтар Daniel Imms, крыніца
Гэта не адказ або вырашэнне пытання, проста прапанова. Яна працуе, выкарыстоўваючы .click() .
дададзена аўтар Daniel Imms, крыніца
@PSR: Ці не маглі б вы адукаваць мяне аб розніцы паміж выкарыстаннем націсніце Апрацоўшчык непасрэдна і на
дададзена аўтар Harsha Venkatram, крыніца
@DanielImms ваш скрыпку не працуе, як чакалася. .click() не працуе з элементам, створаны дынамічна JavaScript.
дададзена аўтар Ankit Jaiswal, крыніца
@DanielImms Chrome - Версія 27.0.1453.93
дададзена аўтар Ankit Jaiswal, крыніца

Паспрабуйце выкарыстоўваць .На() ў jQuery для дынамічных элементаў

 $(document).on("click","#master",function()..
 .........
0
дададзена
@harsha гэта для дынамічных элементаў
дададзена аўтар PSR, крыніца
@AnkitJaiswal я на 26 і, здаецца, добра.
дададзена аўтар Daniel Imms, крыніца
@AnkitJaiswal які браўзэр?
дададзена аўтар Daniel Imms, крыніца
@harsha на() з'яўляецца пераважным метадам ў цяперашні час, то ёсць усё. Абодва працуюць у цяперашні час. націсніце() нават не быў састарэлым яшчэ api.jquery.com/click
дададзена аўтар Daniel Imms, крыніца
Гэта не адказ або вырашэнне пытання, проста прапанова. Яна працуе, выкарыстоўваючы .click() .
дададзена аўтар Daniel Imms, крыніца
@PSR: Ці не маглі б вы адукаваць мяне аб розніцы паміж выкарыстаннем націсніце Апрацоўшчык непасрэдна і на
дададзена аўтар Harsha Venkatram, крыніца
@DanielImms ваш скрыпку не працуе, як чакалася. .click() не працуе з элементам, створаны дынамічна JavaScript.
дададзена аўтар Ankit Jaiswal, крыніца
@DanielImms Chrome - Версія 27.0.1453.93
дададзена аўтар Ankit Jaiswal, крыніца