jQuery $(this) 如何在事件委托方法中使用？

Question

我正在尝试自己编写这个 jQuery 小代码来测试用户是否输入了某些内容。如果他们没有，请提醒他们错误。但是，我似乎有一个小问题，在这种情况下关键字 $(this) 似乎没有表现出应有的行为。请帮忙！

HTML:

<input type="text" id="name" name="name" />
<div id="error-div-1"></div>
<input type="text" id="hobbies" name="hobbies" />
<div id="error-div-2"></div>

JavaScript:

function showError(i) {
    var errorDivID = "#error-div-" + i;

    if ($(this).val() === "") {
        $(errorDivID).html("Please enter something!");
    } else {
        $(errorDivID).html("");
    }
}

$("#name").on("blur", function() {
    showError(1);
});

$("#hobbies").on("blur", function() {
    showError(2);
})

Answer 1

您在showError()中引用的this指的是window对象；因为该函数在全局范围内而不在事件处理程序范围内。

将其传递给如下函数，

function showError(i, element) {
    var errorDivID = "#error-div-" + i;

    if ($(element).val() === "") {
        $(errorDivID).html("Please enter something!");
    } else {
        $(errorDivID).html("");
    }
}

$("#name").on("blur", function () {
    showError(1, this);
});

Answer 2

根据您的 html 的结构，通过在调用中使用 $(this) 可以变得更加简单：

    $("input").on("blur", function() {
        if($(this).val() === ""){
            $(this).next().html("Please enter something!");
        }else {
            $(this).next().html("");
        }

    });

这是一个演示：http://jsfiddle.net/eypm8ozj/1/

Answer 3

您应该尝试将 $(this) 传递给该函数。在该代码中，th $(this) 的值现在是回调，不再是元素。

function showError(i, elem) {
    var errorDivID = "#error-div-" + i;

    if (elem.val() === "") {
        $(errorDivID).html("Please enter something!");
    } else {
        $(errorDivID).html("");
    }
}

$("#name").on("blur", function() {
    showError(1, $(this));
});

$("#hobbies").on("blur", function() {
     showError(2, $(this));
});

Answer 4

你可以在调用 showError 方法时传递 this

<script>
        function showError(i, element) {
            var errorDivID = "#error-div-" + i;

            if ($(element).val() === "") {
                $(errorDivID).html("Please enter something!");
            } else {
                $(errorDivID).html("");
            }
        }

        $("#name").on("blur", function() {
            showError(1, this);
        });

        $("#hobbies").on("blur", function() {
            showError(2, this);
        })
    </script>

或者您可以像下面这样更改 showError 中的逻辑

<script>
        function showError() {

           if ($(this).val() === "") {
                $(this).next('div').html("Please enter something!");
            } else {
                $(this).next('div').html("");
            }
        }

        $("#name").on("blur", showError);

        $("#hobbies").on("blur", showError);
    </script>

您可以像下面这样编写您的逻辑 -

$("#name, #hobbies").on("blur", function(){
     if($(this).val()==""){
           $(this).next('div').html("Please enter something!");
     } else {
           $(this).next('div').html("");
     }

  });

JSFiddle Demo

注意：- 请取消注释相关代码片段以在 JSFiddle 演示中工作 link

Answer 5

要正常使用这个，可以用.call()“修改”函数的范围

function showError(i) {
    var errorDivID = "#error-div-" + i;

    if ($(this).val() === "") {
        $(errorDivID).html("Please enter something!");
    } else {
        $(errorDivID).html("");
    }
}

$("#name").on("blur", function() {
    showError.call(this, 1);
});

$("#hobbies").on("blur", function() {
    showError.call(this, 2);
});

这可以让您的函数代码保持不变。

jQuery $(this) 如何在事件委托方法中使用？

How is jQuery $(this) used inside event delegation method?

javascript

jquery

jquery-events

更多

JSFiddle