Question

我的jQuery事件

我jQuery代碼是：

$(document).ready(function() { 
    $('#btnGenSpan').on('click', function(e) { 
    $("#div_container").html($("#div_container").html()+ 
      "<span>Item-01 <a href='?delete=1' class='delete_item'>X</a></span><br />"); 
    }); 

    $('a.delete_item').on('click',function(e) { 
    alert('delete clicked'); 
    return false; 
    }); 
}); 

這裏是HTML內容：

<input type="button" id="btnGenSpan" value="Generate More Item" /><br /><br /> 
<div id="div_container"> 
    <span>Default Item-01 <a href='?delete=111' class='delete_item'>X</a></span><br /> 
    <span>Default Item-02 <a href='?delete=112' class='delete_item'>X</a></span><br /> 
</div> 

這裏是的jsfiddle here

對於靜態項目（默認項目-01 &默認項目-02）X錨點工作正常，並稱爲delete_item，但對於那些由jquery生成的跨度（相同的HTML類&錨點生成爲默認值）未調用。任何幫助，高度讚賞。

Answer 1

您可能希望嘗試使用事件委託語法on以使事件可用於動態創建的元素。原因是您的原始事件僅限於在事件綁定時已存在於DOM中的a.delete_item，因此新添加的事件並未綁定該事件。因此，只要需要該事件，就可以將事件綁定到存在於DOM中的父容器，以便在該事件發生時將其委託給選擇器（jQuery使用事件冒泡來完成此工作）。

$('#div_container').on('click','a.delete_item', function(e) { 
     e.preventDefault(); 
     alert('delete clicked'); 
    }); 

Demo

Answer 2

必須，如果你不使用它創造活動爲新的DOM 順便試試這個

$(document).ready(function() { 
    $('#btnGenSpan').on('click', function(e) { 
    $("#div_container").html($("#div_container").html()+"<span>Item-01 <a href='?delete=1' class='delete_item'>X</a</span><br />"); 
     $('a.delete_item').on('click',function(e) { 
     alert('delete clicked'); 
     return false; 
     }); 
    }); 

    $('a.delete_item').on('click',function(e) { 
    alert('delete clicked'); 
    return false; 
    }); 
});