我尝试将click事件添加到span时出现Javascript错误

Question

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

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

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

在另一个地方，我有代码：

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

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

所以没关系，但是当我点击新的跨度时，我收到了这个错误：

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

Answer 1

click方法不返回事件处理程序，它返回jQuery对象。首先定义事件处理程序，然后在click方法中使用它：

var spanclickhandler = function () {
    ...

    do some stuff

    ...
};

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

Answer 2

这段代码不符合您的想法（我很确定不会返回处理函数）：

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

    do some stuff

    ...
});

我建议您像这样编码，这应该有效：

var spanclickhandler = function () {
    ...

    do some stuff

    ...
}

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

Answer 3

您想要做的是：

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 4

在这种情况下，

spanclickhandler返回一个jQuery对象$('.officeapprovalspan')。您需要创建单独的函数或使用事件namescapes。

Answer 5

你能做到这一点：

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