我想要实现
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,这是为什么?
亲~~ keyup是单独的事件,你嵌套在click里算什么?
先指出你的一个错误点
$('#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));
别把函数的引用和执行弄混了,好好理解下。
感觉大家的回答都在逃避问题人的问题。
我测试了一下你说的问题,发现了原因。
$('#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))可执行,我也不太清楚,希望有人能回答一下
这个事件 确实单独的。需要循环绑定,没有批量绑定事件这个么操作的。