javascript - 当我尝试将点击事件添加到跨度时出现 Javascript 错误

Question

有谁知道我在这里做错了什么？

var spanclickhandler = $('.officeapprovalspan').click(function () {
    // do some stuff
});

基本上，我有这个spanclickhandler。加载页面时具有类的任何内容officeapprovalspan都将其分配给其单击事件。那里没有问题。

在另一个地方我有代码：

$(this).replaceWith('<span class="officeapprovalspan">wero<span>');
$(document).on('click', '.officeapprovalspan', spanclickhandler);

所以我用这个类的新跨度替换了一些 HTML。我使用 on 将 click 事件添加到 class 的 span 中officeapprovalspan。我收集我必须这样做，因为新跨度不会附加点击处理程序。

没关系，但是当我单击新跨度时，出现此错误：

任何人都知道我做错了什么以及如何解决？

Answer 1

你想做的是：

var spanclickhandler = function () {
        ...

        do some stuff

        ...
};

$(this).replaceWith('<span class="officeapprovalspan">wero<span>');
$('.officeapprovalspan').on('click', spanclickhandler);

或更好

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

        do some stuff

        ...
});
// Because 'on' will attach event on DOM element even if they are not created yet, if you define a selector descendant inside. You can replace `document` by the nearest top parent of all your `.officeapprovalspan` and it will improve performance. `document` is not really optimal here
$(this).replaceWith('<span class="officeapprovalspan">wero<span>');

Answer 2

该click方法不返回事件处理程序，而是返回 jQuery 对象。先定义事件处理器，在click方法中使用：

var spanclickhandler = function () {
    ...

    do some stuff

    ...
};

$('.officeapprovalspan').click(spanclickhandler);

Answer 3

这段代码没有做你认为它做的事情（我很确定没有返回处理函数）：

var spanclickhandler = $('.officeapprovalspan').click(function () {
    ...

    do some stuff

    ...
});

我建议你这样编码，它应该可以工作：

var spanclickhandler = function () {
    ...

    do some stuff

    ...
}

$('.officeapprovalspan').click(spanclickhandler);

Answer 4

你能不能这样做：

$(this).replaceWith('<span class="officeapprovalspan">wero<span>').click(spanclickhandler);

Answer 5

spanclickhandler$('.officeapprovalspan')在这种情况下，返回一个 jQuery 对象。您需要创建一个单独的函数或使用事件名称。