Question

为什么我无法使用追加div编辑颜色。

点击按钮并添加新的div调用＆＃39; block2＆＃39;如果使用$（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');
});

Answer 1

工作演示 http://jsfiddle.net/e7Apx/

请注意，您要附加该元素，因此请为课程.on使用API .block2：$(document).on('click','.block2',function() { ... });

API：.on 文档 - ＆gt; 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');
    });
});

Answer 2

似乎在这里工作..

CHECK FIDDLE

对于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');
});

jQuery - 为什么我不能用append div改变颜色

2 个答案: