如何爲動態添加的跨度元素分配點擊事件？

Question

HTML：

<div class="testSpanDiv"></div> 

的javascript：同時給予點擊跨越元素

$(document).ready(function() { 
     $('.testSpanDiv').append('<span id="testSpan">Hello</span>'); 
    } 

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

事件在不觸發動態添加。 如果將span元素靜態添加到html，則事件正在觸發。 你可以給它任何建議。

我也嘗試過像下面一樣，但不工作。

$('#testSpan').on('click', '.testSpanDiv', function(){ 
     $(this).parent().remove(); 
    }); 

Answer 1

您需要使用這樣的：

 
$('.testSpanDiv').on('click', '#testSpan', function(){ 
    // ^^ parent div    ^^ element in which you want to bind the function 
     $(this).parent().remove(); 
}); 

Answer 2

你的語法錯誤嘗試這種方式

$(document).ready(function() { 
     $('.testSpanDiv').append('<span id="testSpan">Hello</span>'); 


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

https://jsfiddle.net/7x8jbLpt/

Answer 3

您可以從body

委託事件

還要注意有一些語法錯誤在你的代碼

$(document).ready(function() { 
     $('.testSpanDiv').append('<span id="testSpan">Hello</span>'); 
    }) 

    $('body').on('click', '#testSpan', function(){ 
     alert("Hello") 
    }); 

JSFIDDLE