jquery keyup事件为什么不执行？

Question

我想要实现
1.点击#skillKey tr元素后代码颜色改变，
2.之后通过键盘输入后改变当前元素的text，为了方便调试讲步骤2省略为alert(123)
HTML代码代码如下：

<table id="skillKey">
<tbody>
<tr>Q</tr>
</tbody>
<table>

JQuery代码如下：

$(function () {

    $('#skillKey').on('click', 'tr', function () {
        $(this).css('color','red');
        $(this).keyup(function(){
        alert(123)
        });
    });
})

为什么点击后元素变色，而通过键盘输入，无法alert？通过$(document).keyup()确实可以达到效果，想知道其中原因。有可能与keyup()要求绑定的元素类型有关？

另：一种错误的keyup()函数调用方法，若这样写：

$(function () {

    $('#skillKey').on('click', 'tr', function () {
        $(this).css('color','red');
        $(this).keyup(alert(123));
    });
})

那么点击tr后元素变色的同时会弹窗123，这是为什么？

Answer 1

先指出你的一个错误点

$('#skillKey').on('click', 'tr', function () {
    $(this).css('color','red');
    $(this).keyup(function(){
    alert(123)
    });
});

你这样绑定事件，结果是点击一次tr绑定一次，点了多少次就绑定了多少次，这个例子还是不明显，你在tr里放置一个input，然后编写如下代码，看看效果如何

$('#skillKey').on('click', 'input', function () {
    $(this).css('color','red');
    $(this).blur(function(){
        alert(123)
    });
});

再给个建议

需要使用的元素可以先缓存，不要滥用$，易读的前提下可以使用链式

$('#skillKey').on('click', 'tr', function () {
    var $this = $(this);
    $this
        .css('color', 'red')
        .keyup(function () {
            alert(123)
        });
});

再来解答你的问题

• 不触发keyup事件，是因为键盘事件需要元素获取焦点，tr获取不到焦点当然触发不了。再者如果你要点击修改文本内容不应该是弹出一个input么？

• $(this).keyup(alert(123)); 你把alert的前后内容都去掉不就是alert(123)，函数加上”()“就会执行的

补充

你所说的效果不可控性太强，输入不可见也就不支持复制粘贴了。我推荐下面这种方式，你看下适不适用你的情景

HTML

<table class="table" id="skillKey">
    <thead>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>小于</td>
        <td>12</td>
    </tr>
    <tr>
        <td>老李</td>
        <td>20</td>
    </tr>
    </tbody>
</table>

JS

$('#skillKey')
    .on('click', 'tbody td', function () {
        var $this = $(this);
        var text = $this.text();

        var $input = $('<input type="text">');

        $input.on('blur', function () {
            $this.text($input.val());
            $input = null;
        });

        $this.html($input);
        $input.focus().val(text);
    })
    .on('click', 'input', function (e) {
        e.stopPropagation();
    });

效果

函数执行问题
函数后面加上“()”就会执行，例如

$(this).keyup(alert(123));

这里执行keyup函数，先要解析参数，发现参数是alert(123)，肯定立马先弹出123，然后继续往下解析。例如

function fn(){
    alert(4);
}

fn(alert(3));

别把函数的引用和执行弄混了，好好理解下。

Answer 2

亲~~ keyup是单独的事件，你嵌套在click里算什么？

Answer 3

这个事件 确实单独的。需要循环绑定，没有批量绑定事件这个么操作的。

Answer 4

感觉大家的回答都在逃避问题人的问题。

我测试了一下你说的问题，发现了原因。

$('#skillKey').on('click', 'tr', function () {
    $(this).css('color','red');
    $(this).keyup(function(){
        alert(123)
    });
});

这里的keyup后的function需要给一个参数e，相当于是你按键盘键的对象，所以下面就可以执行了。

$('#skillKey').on('click', 'tr', function () {
    $(this).css('color','red');
    $(this).keyup(function(e){
        alert(123)
    });
});

至于你说的为什么 $(this).keyup(alert(123))可执行，我也不太清楚，希望有人能回答一下