它是一個範圍問題？

我在卡上添加了一個關閉按鈕。我嘗試這個代碼，但關閉按鈕似乎不工作。它是一個範圍問題？

$('#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(); 
});

然而，當我提出這個代碼：$('#posted-pets').append($newPet); 之後

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

然後，它的工作原理確定。這是爲什麼？

來源

2017-03-02 Ai Nguyen

每當你想爲它可以通過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); 

});

來源

2017-03-02 17:00:12

爲什麼需要addClass（'close'）？已經有這個類了嗎？ –

@AiNguyen'$（''）'將創建沒有類名的新的span標籤。 'addClass（'close'）'將類'close'添加到span標籤。這是另一種創建新標籤的方法。與'相同 –

當關閉功能位於div之外時，它將嘗試附加到現有的.close元素，並且您嘗試附加到的元素在該時間點不存在。您需要在內部執行此操作，因爲您需要先創建$newPet元素，然後才能對其進行附加。

來源

2017-03-02 16:55:57

我覺得代碼$（ '接近 '）上（' 咔噠'。 function（）{ $（this）.parent（）。remove（）; }）;將搜索Dom，然後將刪除功能附加到它。但是，你的意思是我需要在創建它之前將其附加到元素上，對嗎？ –

正確。創建元素後需要執行此操作，並在創建元素之前運行頂層示例 –

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

如果您還沒有追加你的HTML，那麼它不能被jQuery

來源

2017-03-02 16:56:07

它是一個範圍問題？

回答

相關問題