先指出你的一个错误点
$('#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
姓名年龄
小于12老李20JS
$('#skillKey')
.on('click', 'tbody td', function () {
var $this = $(this);
var text = $this.text();
var $input = $('');
$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));
别把函数的引用和执行弄混了,好好理解下。