刪除追加與點擊

我有以下代碼： HTML：刪除追加與點擊

<body> 
     <div> 
     <p class='Go'> 
      Create 
     </p> 
     <p class='Del'> 
     Remove 
     </p> 
     </div> 
    </body>

CSS：

.Go{ 
    background-color: lime; 
    width:45px; 
    text-align: center; 
} 
.bad{ 
    background-color:Red; 
    width: 45px; 
    text-align:center; 
} 
.Del{ 
    background-color:pink; 
    width: 55px; 
}

的Javascript（jQuery的）

$(document).ready(function(){ 
    $('.Go').click(function(){ 
     $('div').append("<p class='bad'>Delete</p>"); 
    }); 
    $('.bad').click(function(){ 
     $(this).remove(); 
    }); 
    $('.Del').click(function(){ 
     $('.bad').remove(); 
    }) 
});

的想法是，每一次我點擊「創建」，它會添加一個新的「刪除」。

每次我點擊「刪除」時，所有的「刪除」都會消失，每次我點擊一個「刪除」時，該刪除就會被刪除。

除最後一個以外的所有工作。任何想法我在這裏做什麼錯誤？

來源

2017-08-22 Lucian cahil

這是因爲在頁面加載後'Delete'元素被添加，但'因爲加載頁面時，有沒有'bad'的div .click'勢必落空。 – tima

如果你在一個div中設置你想要刪除的部分，該怎麼辦。所以如果你點擊刪除裏面的所有div將被刪除。 –

在這種情況下，您無法將jQuery點擊綁定到尚不存在的元素。您只綁定$（document）.ready（）上的點擊。解決這個問題的方法是在文檔就緒功能期間將想要刪除的元素綁定到存在的元素。

$('body').on('click', '.bad', function(){ 
    $(this).remove() 
})

這就是說，無論何時單擊正文，如果該事件目標有一類.bad，則將其刪除。這樣，jQuery事件綁定正確。這裏

工作例如：https://jsfiddle.net/xexhdfzw/1/

來源

2017-08-22 02:17:18 Beaut

刪除追加與點擊

回答

相關問題