2

appenddivで色を編集できないのはなぜですか。

ボタンをクリックして、新しいdiv呼び出し'block2'を追加します。$（this）を使用すると、機能しません。それを修正する方法は？

HTML

<div id="btn"><input name="click" type="button" value="Click" /></div>
<div class="block1" style=" width:100px; height:100px; background:orange;">I am Block1</div>

JS

    $('#btn').click(function(){
        var $newDiv=$('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>');
        $( "#btn").parent().append($newDiv);

    });

$('.block1').click(function(){
    $(this).css('background', 'blue');
});

$('.block2').click(function(){
    $(this).css('background', 'blue');
});
4

2 に答える 2

3

作業デモ http://jsfiddle.net/e7Apx/

.on要素を追加しているため、クラスにAPIを使用していることに注意してください.block2。 $(document).on('click','.block2',function() { ... });

API：.on ドキュメント-> http://api.jquery.com/on/

それが原因に合うことを願っています:)

コード

$(function() {
    $('#btn').click(function() {
        var $newDiv = $('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>');
        $("#btn").parent().append($newDiv);

    });

    $('.block1').click(function() {
        $(this).css('background', 'blue');
    });

    $(document).on('click','.block2',function() {
        $(this).css('background', 'blue');
    });
});​
于 2012-10-20T01:06:31.997 に答える
1

ここで動作しているようです。

フィドルを確認してください

block2の場合、動的に追加されるため、イベントを委任する必要があります。

$('body').on('click','.block2' ,function() {
    $(this).css('background', 'blue');
});​

JS

$('#btn').click(function() {
    var $newDiv = $('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>');
    $("#btn").parent().append($newDiv);

});

$('.block1').click(function() {
    $(this).css('background', 'blue');
});

$('body').on('click','.block2' ,function() {
    $(this).css('background', 'blue');
});​
于 2012-10-20T01:08:33.177 に答える