2015-02-06 79 views
-1

我想創建類似stackoverflow.com標籤雲的東西。 我能夠顯示標籤,但堅持如何捕獲哪個標籤元素取消按鈕被點擊。找到哪個動態創建的按鈕已被點擊

取消按鈕是使用jquery動態創建的,點擊btnAdd

$("#<%=btnAdd.ClientID%>").on('click',function(){ 
    var tagText = $('#<%=txtTag.ClientID%>').val(); 
    var btnCancel = '<button class="btn btn-default">X</button>'; 

    var tagTextDiv ='<div class="tagElement">' + tagText + btnCancel +'</div>'; 

    $("#divTagCloud").append(' ' + tagTextDiv); 
}); 

HTML是

<div class="col-xs-12 col-sm-6"> 
    <asp:TextBox runat="server" /> 
</div> 
<div class="col-xs-12 col-sm-6"> 
    <asp:Button runat="server" id="btnAdd"/> 
</div> 


<div class="col-xs-12 col-sm-12"> 
    <div id="divTagCloud"></div> 
</div> 

我想刪除的標籤即相應取消按鈕的點擊相應tagTextDiv

如何做到這一點?

+0

您能否爲您的問題添加一個HTML結構示例。 – 2015-02-06 08:06:53

+0

好的給我一分鐘 – 2015-02-06 08:07:22

+0

你能夠顯示jQuery的輸出(在asp.net標籤被渲染後?) – atmd 2015-02-06 08:09:27

回答

1

創建標記和按鈕元素作爲jQuery對象而不是字符串。這允許您在將事件處理程序插入DOM之前附加它們。

$("#<%=btnAdd.ClientID%>").on('click',function(){ 
    var tagText = $('#txtTag').val(); 
    // Create the tag and cancel button elements 
    var btnCancel = $('<button class="btn btn-default">X</button>'); 
    var tagTextDiv = $('<div class="tagElement">' + tagText + '</div>'); 
    // insert the cancel button into the tag element 
    tagTextDiv.append(btnCancel); 
    // attach an onclick event handler to the cancel button, that removes the tag. 
    btnCancel.click(function() { 
     // "this" is the element that the event handler is attached to, in this case, the cancel button 
     // get its' parent (the tag text div) and remove that from the DOM 
     $(this).parent().remove(); 
    }); 
    // finally, insert the new tag into the DOM 
    $("divTagCloud").append(tagTextDiv); 
});