摘要：問題出現(xiàn)的場景是使用組件，但是該組件沒有自帶的編輯功能，所以需要自己處理在行內(nèi)編輯的效果。需要注意一點(diǎn)，我們在使用綁定事件的時候，重復(fù)的事件是不會被清除的，而是會累加，所以，在中重新添加事件之前，需要將之前的先清除。

問題出現(xiàn)的場景是：
使用dataTables組件，但是該組件沒有自帶的編輯功能，所以需要自己處理table在行內(nèi)編輯的效果。

目標(biāo)效果是：
1.當(dāng)hover到當(dāng)前tr的時候，該行tr中可以編輯的td中出現(xiàn)一個input框：

2.當(dāng)離開當(dāng)前tr的時候，該行退出可編輯的狀態(tài)，恢復(fù)到?jīng)]有hover上去之前的效果。

3.當(dāng)td變成可編輯狀態(tài)，即出現(xiàn)了一個input輸入框的時候，focus到input輸入框中，可以輸入number；當(dāng)input框發(fā)生blur事件的時候，td恢復(fù)到非編輯狀態(tài)：

由于blur和moseleave都會讓輸入框恢復(fù)到非編輯的狀態(tài)，所以，這里的事件會有沖突。

在實際的編碼中，在tr上綁定了mouseenter和mouseleave事件；

function mouseenterEvt (e) {
    var tds = $(this).children("td");
    $.each(tds, function (i, val) {
        var jqob = $(val);
        if (i !== 3) {
            return true;
        }
        // if there is something validate wrong,stay there width no value exchange
        var validateSpanDom = jqob.find("span");
        var value = validateSpanDom ? validateSpanDom.text() : "";
        var validateTxt = validateInputBox(value);
        if(validateTxt) return false;
        // open edit mode
        jqob.addClass("edit-btn-display");
        var txt = jqob.text();
        txt = txt.replace("$", "");
        txt = txt.replace(/,/g, "");
        var put = $("
");
        put.children(".edit-input-box").val(txt);
        jqob.html(put);

    });
}
$("#table_id_example tbody").on("mouseenter", "tr",mouseenterEvt );

$("#table_id_example tbody").on("mouseleave", "tr", function (e) {
    var row = tableDom.row($(this));
    var tds = $(this).children("td");

    $.each(tds, function (i, val) {
        var jqob = $(val);
        if (jqob.hasClass("edit-btn-display") && jqob.find(".edit-input-box").length > 0) {
            // if there is something validate wrong,stay there width no value exchange
            var validateSpanDom = jqob.find("span");
            var value = validateSpanDom ? validateSpanDom.text() : "";
            var validateTxt = validateInputBox(value);
            if(validateTxt) return false;
            var txt = jqob.find(".edit-input-box").val();
            txt = txt.replace("$", "");
            if(String(txt).indexOf(".") !== -1 ) {
                txt = Number(txt).toFixed(2);
            }
            jqob.html(txt);
            tableDom.cell(jqob).data(txt);
            // close edit mode
            jqob.removeClass("edit-btn-display");
        }
    });

    $("#table_id_example tbody").off("mouseenter", "tr",mouseenterEvt )
    $("#table_id_example tbody").on("mouseenter", "tr",mouseenterEvt )
});

在input輸入框上綁定了blur事件：

$("#table_id_example tbody").on("blur", ".edit-input-box", function (e) {
    var value = $(this).val();
    var validateTxt = validateInputBox(value)
    if (!validateTxt) {
        var td = $(this).parents("td");
        var row = tableDom.row($(td));
        $(this).toggleClass("edit-btn-being-edit");
        var txt = $(this).val();
        txt = txt.replace("$", "");
        if(String(txt).indexOf(".") !== -1 ) {
            txt = Number(txt).toFixed(2);
        }
        td.html(txt);
        tableDom.cell(td).data(txt);//change data of DataTables obj
        var data = row.data();
        //alert("save current monthly-budget value")
        $("#table_id_example tbody").off("mouseenter", "tr",mouseenterEvt )
    }
});

對于事件解綁和重新綁定的解釋：

當(dāng)沒有進(jìn)行事件的解綁和重新綁定的時候，在input框中輸入結(jié)束，點(diǎn)擊input所在的td的時候，會接著觸發(fā)mouseenter事件；但是當(dāng)點(diǎn)擊該input所在的td之外的td的時候，就會發(fā)生blur事件和mouseleave事件。

為了，在點(diǎn)擊當(dāng)前input所在的td的時候，只發(fā)生blur事件，需要在blur事件結(jié)束之后，刪除mouseenter事件的綁定。這樣，tr的mouseenter事件被刪除了就不會觸發(fā)了。

但是，在當(dāng)前行blur之后，再進(jìn)入其他的行依舊需要能夠編輯，又由于編輯完一行之后，肯定是會mouseleave該行的，因此，在tr的mouseleave事件中又將tr的mouseenter事件加回去。

需要注意一點(diǎn)，我們在使用jq綁定事件的時候，重復(fù)的事件是不會被清除的，而是會累加，所以，在mouseleave中重新添加事件之前，需要將之前的先清除。在這里就是：在mousenter之后根本沒有對input進(jìn)行編輯就mouseleave了，此時在mouseleave中若不先清除原有的事件，那么tr上的mouseenter事件就會被添加兩次。