问题描述
我想将tr转换为doubleclick上的input ，让用户编辑它，然后当他们在框外单击时，我调用一个函数来更新数据库并恢复表行，并取消绑定事件。
当然，它没有按预期工作。
var edit_event;
$('.editable-column').on('dblclick',function(e){
//make editable
var type = $(this).data('type'),
val = $(this).text(),
id= $(this).parents('tr').data('id'),
column = $(this).data('column'),
model = $(this).parents('table').data('model');
if(type == 'textarea'){
$(this).html('<textarea data-id="'+id+'" data-model="'+model+'" data-column="'+column+'" class="editing" style="min-height: 80px;">'+val+'</textarea>');
}
if(type == 'input'){
$(this).html('<input data-id="'+id+'" data-model="'+model+'" data-column="'+column+'" class="editing" type="text" value="'+val+'" />');
}
edit_event = $('body').not(this)[0].addEventListener('click',function(e){
//save model
var $el = $('.editing');
var id= $el.data('id'),
column = $el.data('column'),
model = $el.data('model'),
val = $el.val();
$el.parent('td').html( val );
updateModel(model,id,column,val);
$('body')[0].removeEventListener('click',edit_event);
edit_event = null;
});
});
添加一些HTML来清理图片
<table data-model="video">
<tbody>
{% for item in pending_videos %}
<tr data-id="{{item.id}}" data-type="{{item.type}}" data-file="{{item.video_file}}">
<td style="text-align:center">
<button type="button" class="preview-vid btn btn-md btn-default" data-toggle="modal" data-target="#preview-window" >
<i class="fa fa-play"></i>
</button>
<button type="button" class="approve-vid btn btn-md btn-success">
<i class="fa fa-check"></i>
</button>
<button type="button" class="delete-vid btn btn-md btn-danger">
<i class="fa fa-times"></i>
</button>
</td>
<td class="editable-column" data-type="input">{{item.title}}</td>
<td class="editable-column" data-type="textarea">{{item.description}}</td>
<td>{{item.upload_date|date('m/d/Y')}}</td>
<td>
<select class="cat-opts select-onload video-category" data-selected="{{item.videocategory_id}}" autocomplete="off">
{{category_options|raw}}
</select>
</td>
</tr>
{% endfor %}
</tbody>
</table>
1楼
r3wt
0
2015-07-31 07:58:22
所以在与朋友讨论之后，我能够看到更简单的解决方案。
我没有试图在身体上侦听第二个事件，而只是将输入聚焦并绑定到其blur事件。
$('.editable-column').on('dblclick',function(e){
//make editable
var type = $(this).data('type'),
val = $(this).text(),
id= $(this).parents('tr').data('id'),
column = $(this).data('column'),
model = $(this).parents('table').data('model');
if(type == 'textarea'){
$(this).html('<textarea data-id="'+id+'" data-model="'+model+'" data-column="'+column+'" class="editing" style="min-height: 80px;">'+val+'</textarea>');
}
if(type == 'input'){
$(this).html('<input data-id="'+id+'" data-model="'+model+'" data-column="'+column+'" class="editing" type="text" value="'+val+'" />');
}
//focus input then listen for blur
$(this).children(':input').focus().blur(function(){
//save model
var $el = $('.editing');
var id= $el.data('id'),
column = $el.data('column'),
model = $el.data('model'),
val = $el.val();
$el.parent('td').html( val );
updateModel(model,id,column,val);
});
});