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

当close函数在div之外时，它会尝试附加到现有的.close元素，并且您尝试附加的元素在该时间点不存在。你需要在里面完成它，因为你需要先实际创建$newPet元素才能附加它。

Answer 2

$('.close')将在dom中搜索。

如果您未附加html，则无法通过jQuery

找到它

Answer 3

每当你想为可以通过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);

});

这是范围问题吗？

3 个答案: