Question

我正在尝试找到最简单，更清晰的方法来追加和删除附加的span，div或text。这是代码。可能有什么不对？

/* HTML CODE */
<div id="appendHere" style="padding:10px;border:solid 1px red"></div>

/* Jquery CODE */
$('#appendHere').live('click' , function() {
    $('#appendHere').append('<span style="padding:10px;border:solid 1px green;">Simple text</span>');
});

$('#appendHere span').live('click' , function() {
    $(this).remove();
});

Answer 1

DEMO

您可以尝试使用.toggle()

示例：

$('#appendHere').on('click' , function(e) {
 $('#appendHere span').toggle();
});

Answer 2

取决于您使用的jQuery版本。您对.live()的使用可能是您的第一个问题。请改为.on()示例：

$(document).on('click', '#appendHere span', function(){$(this).remove();});

您也可以尝试类似

的内容

<style>
#addHere{padding:10px;border:solid 1px red;}
#addHere span{padding:10px;border:solid 1px green;}
</style>

<div id="appendHere" data-has_span="false"></div>
$(document).on('click', '#appendHere', function()
{
    $elem = $(this);
    if($elem.data('has_span') == "false")
    {
        $elem.prop('data-has_span', 'true').append('<span>Text here</span>');
    }
    else
    {
        $elem.prop('data-has_span', 'false').find('span').remove();
    }
});

Answer 3

您最好不要使用live，而是尝试.bind()或.on()

问题是当您点击span时，点击了div并time

所以你可以尝试这样做：

$("appendHere").on("click", function(e) {
    if(!$(this).is($(e.target))) {
        return false;
    }
    $("<span>Text here</span>").appendTo($(this)).on("click", function() {
         $(this).remove();
    });
});

删除单击它的附加文本Jquery

3 个答案: