獲取具有相同類別的當前span元素

Question

Iam具有多個具有動態創建的相同類名稱的span元素。

<span class="btn catgry" style="margin:10px" onclick="catg()">'+result[i]+'</span>' 

如何獲得被點擊，目前span元素的文本。我曾試圖這樣

function catg() 
{ 
-- 
var s = $(".catgry",this) .text(); 
-- 
} 

，但其沒有工作..

Answer 1

一種選擇是通使用this關鍵字當前元素：

... onclick="catg(this);" ... 

而且具有趕上它在JavaScript：

function catg(span) { 
    ... 
    var s = $(span).text(); 
    ... 
} 

另一種選擇是bi次點擊事件省略onclick屬性：

$(document).on("click", ".btn.catgry", function() { 
    ... 
    var s = $(this).text(); 
    ... 
}); 

這裏，而不是document你可以使用任何.btn.catgry靜態父元素。

Answer 2

你也可以嘗試

var spanText = $(this).text(); 

Answer 3

y不u使用這樣

$('span.catgry').click(function(){ 
    //your logic 
    var text = $(this).text(); 
}); 

Answer 4

function clicked(evt) { 
    alert(evt.target.textContent); 
} 

for (var i = 0; i < 10; i += 1) { 
    var span = document.createElement("span"); 

    span.className = "btn catgry"; 
    span.textContent = "Result" + i; 
    span.addEventListener("click", clicked, false); 
    document.body.appendChild(span); 
} 

上jsfiddle

使用內嵌的JavaScript的被認爲是不好的做法。

即onclick="catg()"

如果你要使用jQuery來添加事件後，您動態添加您的跨度。然後考慮使用delegated events

當提供選擇器時，事件處理程序被稱爲 委託。當事件直接發生在綁定元素的 上時，不會調用處理函數，但僅對於 與選擇器匹配的後代（內部元素）。 jQuery將事件從事件目標 中的事件冒泡到處理程序所附的元素（即，最內層到最外層元素 ），併爲匹配選擇器的路徑上的任何元素運行處理程序。

function clicked(evt) { 
    alert(evt.target.textContent); 
} 

$(document).on("click", ".btn", clicked); 

for (var i = 0; i < 10; i += 1) { 
    var span = $("<span>").attr({ 
     "class": "btn catgry" 
    }).text("Result" + i); 

    $(document.body).append(span); 
} 

上jsfiddle

Answer 5

如果他們dinamicaly arecreated我建議你來包裝跨度的包裝，讓jQuery來獲得DOM後準備

$('#wrapper').on('click', '.catgry', function(){ 
var s = $(this).text(); 
})