JQuery 使用 THIS 作为 .on [选择器]

Question

嗨, 所以我得到了这个代码：

$(document).on('click', ".buttonSelectAllOpt", function () {
    alert(this.attr("id"));
});

和PHP：

$iii=1
while([...]){
echo "<span class=\"buttonSelectAllOpt\" id=\"buttonSelectAllOpt$iii\">Some text</span>";
$iii++;
}

我希望这是 .buttonSelectAllOpt，但是似乎 THIS 指的是文档，而不是选择器。您知道我能否以某种方式调用选择器吗？

Answer 1

this 将引用所选的项目，因此请尝试选择实际元素：

$('.buttonSelectAllOpt').click(function () {
    alert($(this).attr("id"));
});

另请注意，.click 是 .on('click') 的首选 shorthand。将事件附加到实际对象（而不是文档）也更快。

看到这个JSFiddle。

Answer 2

this 在您的示例中将引用被单击的 .buttonSelectAllOpt 元素，但是您需要将其包装在 jQuery 对象中以访问 attr() 方法.试试这个：

$(document).on('click', ".buttonSelectAllOpt", function () {
    alert($(this).attr("id"));
});

Example fiddle

Answer 3

使用 this.id 或 $(this).attr('id')。在事件处理程序中，this 是一个 DOM 元素，因此您可以直接访问其属性。如果要使用jQuery .attr() 方法，需要将其包裹在jQuery 对象中。

Answer 4

这是一个备选答案，因此您无需使用文档本身注册事件...

尝试创建这样的方法：

var initBtnHandler = function () {
    $('a.buttonSelectAllOpt').on('click', function() {
        alert($(this).attr('id'));
    });
}

然后，在您的 AJAX 完成后，只需调用以下函数重新注册事件：

$.ajax({
    url: 'yourUrl',
    type: 'post',
    success: function () {
        // do something
    },
    complete: function() {
        initBtnHandler();
    }
});

现在，您的新项目将注册到事件处理程序。

JQuery 使用 THIS 作为 .on [选择器]

JQuery using THIS as a .on [selector]

php

jquery

this