单击后警报按钮的内部内容答案

【问题标题】：Alert button's inner content after clicking it单击后警报按钮的内部内容
【发布时间】：2015-03-13 09:08:07
【问题描述】：

请帮助修复错误：代码当前警告未定义而不是按钮的内部内容

 function registerClickHandler() {
   $('#clickme').click(function() {
     setTimeout(function() {
       alert(this.innerHTML);
     }, 200);
   });
 }

【问题讨论】：

这是因为 setTimeout 函数现在已经失去了 'this' 的作用域，请尝试在 function() 参数中将您要引用的内容传递给 setTimeout 函数。
这是一个招聘测试的问题。

标签： javascript jquery click alert innerhtml

【解决方案1】：

this 里面的超时处理不是按钮

function registerClickHandler() {
    $('#clickme').click(function (e) {
        setTimeout(function () {
            alert(e.currentTarget.innerHTML);
        }, 200);
    });
}

【讨论】：

【解决方案2】：

尝试获取setTimeout之前的值

  function registerClickHandler() {
        $('#clickme').click(function () {
            var value=this.innerHTML;
            setTimeout(function () {
                alert(value);
            }, 200);
        });
    }

【讨论】：

【解决方案3】：

在 java 脚本中 this 指向最后一个函数，而超时处理程序内部不是按钮，这就是您收到错误的原因。

使用on.('click', function(){...})实现这种功能或点击也是一个好习惯

您可以在下面看到我的示例：

$(document).ready(function(){
    $('#clickme').on('click', function (e) {
        setTimeout(function() {
            alert(e.currentTarget.innerHTML);
        }, 200);
    });
});

您可以在这里查看并运行它：http://jsfiddle.net/gon250/6qwk0g1t/1/

【讨论】：

【解决方案4】：

尝试将点击事件处理程序放在函数之外。在调用 setTimout 之前，还要将“this”的值传递给变量。稍后在 setTimout 中使用这个变量。阅读有关 Javascrpt 原型的更多信息here

$(document).ready(function(){
  $('#clickme').click(function() {
    var me = this;
         setTimeout(function() {
           alert(me.innerHTML);
         }, 200);
       });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">click me</div>

【讨论】：