javascript - 是范围问题吗？

Question

我向卡片添加了一个关闭按钮。我尝试了这段代码，但关闭按钮似乎不起作用。

$('#add-pet').on('click', e => {

    // Grab info from the form
    let $name = $('#pet-name').val();
    let $species = $('#pet-species').val();
    let $notes = $('#pet-notes').val();

    let $newPet = $(
        '<section class="six columns"><div class="card"><p><strong>Name:</strong> ' + $name +
        '</p><p><strong>Species:</strong> ' + $species +
        '</p><p><strong>Notes:</strong> ' + $notes +
        '</p><span class="close">&times;</span></div></section>'
    );

    // Attach the new element to the page
    $('#posted-pets').append($newPet);

});
$('.close').on('click', function() {
    $(this).parent().remove();
});

但是，当我移动此代码时:

$('.close').on('click', function() {
    $(this).parent().remove();
});

就在$('#posted-pets').append($newPet);之后然后就可以正常工作了。为什么会这样？

Answer 1

每当你想为可以通过 jquery 附加的元素创建一个事件时，你可以尝试:

$(document).on('click', '.close', function() {
    $(this).parent().remove();
});

它在附加 span.close 标记后起作用。即使超出范围

$('#add-pet').on('click', /*...*/);

更新:

您还可以尝试:

$('#add-pet').on('click', e => {
    let close_tag = $('<span>').addClass('close');

    // do stuff...

    // set event
    close_tag.on('click', function () {
        $(this).parent().remove();
    });

    $('#posted-pets').append(close_tag);

});