javascript - 在主体上绑定(bind)事件但不在当前元素上绑定(bind)事件，然后在回调内取消绑定(bind)它

Question

我想将tr转换为doubleclick上的input，让用户编辑它，然后当他们在框外单击时，我调用一个函数来更新数据库并恢复表行，并取消绑定(bind)事件。当然，它并没有按预期工作。

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>

Answer 1

因此，在与 friend 讨论后，我找到了一个更简单的解决方案。

我没有尝试监听主体上的第二个事件，而是只关注输入并绑定(bind)到其 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);
    });
});