jquery點擊事件沒有觸發使用jquery動態創建的元素

我想做一個簡單的功能，其中用戶從下拉列表中選擇一些值，然後單擊添加按鈕以添加下面的div中選定的項目的標籤。jquery點擊事件沒有觸發使用jquery動態創建的元素

每個添加的標籤都有一個移除錨點，當點擊該標籤時將移除該標籤。

現在當點擊添加按鈕標籤正在正確插入，但是，當我點擊標籤上的刪除按鈕，點擊事件不會觸發。

但是，如果我使用與動態生成的標記完全相同的標記對一些標記進行了硬編碼，則刪除標記的點擊事件正確地點射並且正在按照我的意願移除標記。

HTML：

<select id="ddlTagName"> 
    <option value="1">Tag One</option> 
    <option value="2">Tag Two</option> 
    <option value="3">Tag Three</option> 
</select> 
<input id="btnInsertTag" type="button" value="Add"/> 
<br/> 

<div id="TagsHolder"> 
    <span class="tag"> 
     <span>Tag One HardCoded </span> 
     <a class="remove">X</a> 
    </span> 

    <span class="tag"> 
     <span>Tag Two HardCoded </span> 
     <a class="remove">X</a> 
    </span> 
</div>

JS：

$("#btnInsertTag").click(function() { 
    var selectedTagText = $("#ddlTagName option:selected").text(); 
    var selectedTagValue = $('#ddlTagName').val(); 
    var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' + selectedTagText + ' </span><a class="remove">X</a></span>'; 
    $("#TagsHolder").append(generateMarkup); 
}); 

$(".remove").click(function() { 
    alert('click event triggered'); 
    $(this).parent(".tag").remove(); 
});

我的問題是，爲什麼click事件不點火的動態生成標籤。

這裏是Demo

在此先感謝

來源

2014-03-24 Saurabh Palatkar

Goggled your question title and got this as first result：http://stackoverflow.com/questions/20819501/jquery-click-event-not-working-for-dynamically-created-button –

即使使用授權，而不是

事件代表團允許我們附加一個單一的事件偵聽器，到父元素，將火所有與選擇器匹配的孩子，無論這些孩子現在是否存在或將來是否添加。

More info

$(document).on('click', '.remove', function() {.....

來源

2014-03-24 12:57:37

OP似乎並不知道事件授權的概念，你可以至少告訴他直接綁定與事件授權有什麼不同，或者因爲在SO上有這樣的問題一千次，所以將其標記爲重複。 –

救了我的培根。 :) – Alex

jQuery的。點擊不符合您需要綁定事件動態創建的HTML元素的工作。這是執行該操作的代碼。

$("body").on("click", "#btnInsertTag", function(e){ 

var selectedTagText = $("#ddlTagName option:selected").text(); 
var selectedTagValue = $('#ddlTagName').val(); 
var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' + selectedTagText + ' </span><a class="remove">X</a></span>'; 
$("#TagsHolder").append(generateMarkup); 

});

來源

2014-03-24 13:03:36 mohsin139

$("#btnInsertTag").on('click', function() { 
    var selectedTagText = $("#ddlTagName option:selected").text(); 
    var selectedTagValue = $('#ddlTagName').val(); 
    var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' + selectedTagText + ' </span><a class="remove">X</a></span>'; 
    $("#TagsHolder").append(generateMarkup); 
}); 
$(document).on('click', ".remove", function() { 
     alert('click event triggered'); 
    $(this).parent(".tag").remove(); 
});

事件綁定不會用於動態地生成的元素工作。爲此，您需要綁定到JS運行時存在的元素（這是文檔），並在.on（）的第二個參數中提供一個選擇器。當文檔元素髮生點擊時，jQuery檢查它是否應用於與「.remove」選擇器相匹配的元素的子元素。

來源

2014-03-24 14:25:52

jquery點擊事件沒有觸發使用jquery動態創建的元素

回答

相關問題