我发现问题有好几个地方。不过终于解决了。
1. jquery版本
看了原始码之后,影片作者使用的是 jquery 1.6。
我自己刚下载的jquery 是1.11.0.min.js。
但是 jquery 1.7 之后,live 函数要改用 on
2. 为什么要用 live 或 on?
这一页的范例是,有一个文字字段,输入文字后确认,
内容会即时出现在下方的列表,并且附带一个删除连结。
按下删除连结后,要可以即时删除这个元素。
注意,这些动作没有重整页面。
如果没有加 live ,只有原本已存在的记录可以删除,
但是刚刚才透过ajax新增、未重整页面的记录,无法删除。
示意图:
┌───┐
└───┘ 确认按钮
aaa X
bbb X
ccc X
asdf X
hahaha X
yayaya X
3. 下面这是原作者提供下载的原始码,使用 jquery 1.6
$('.del').live('click', function() {
delItem = $(this);
var id = $(this).attr('rel');
$.post('dashboard/xhrDeleteListing', {'id': id}, function(o) {
delItem.parent().remove();
//alert(1);
}, 'json');
return false;
});
但是把 live 改成 on 也不行~,把json 拿掉也不行。
最后发现要这样:
这一行
$('.del').live('click', function() {
改成这样:
$('#listInserts').on('click', '.del', function(o){
这是影片底下某个留言讲的。
(listInserts是包含全部列表的div。)
原作者的官网:http://jream.com/lab
完整的原始码:下载 Part 4 那个 Download