Question

我有多个动态创建的具有相同类名的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();
    ...
}

另一个选项是绑定点击事件，省略onclick属性：

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

此处代替document，您可以使用.btn.catgry的任何静态父元素。

Answer 2

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);
}

on 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);
}

on jsfiddle

Answer 3

您也可以尝试

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

Answer 4

你不喜欢这样使用

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

Answer 5

如果它们是动态创建的，我建议你将spans包装在一个包装器中让jquery在dom准备好后创建spans

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

获取具有相同类的当前span元素

5 个答案: