Question

在SO上有很多问题可以解决检测指定元素之外点击的问题。但是，在这种情况下，它们似乎都没有达到我的目的。这是一个功能：

function rateit(){
    var cell = $('td.ratingcell');
    cell.dblclick(function(e){
        e.preventDefault();
        var oldhtml = $(this).html();// restore this when clicked outside the cell
        var oldratingval = parseFloat($(this).find('span.ratingval:first').text(), 10);
        var oldratingcount = parseFloat($(this).find('span.ratingcount:first').text(), 10);
        var blanks = '<span id="5">☆</span><span id="4">☆</span><span id="3">☆</span><span id="2">☆</span><span id="1">☆</span>';
        $(this).addClass('editablerating');
        $(this).html("<span id='editrating'>" + blanks + "</span>");
        var clickedstar = $('#editrating span');
        clickedstar.click(function(f){
            f.preventDefault();
            var newrating = parseFloat($(this).attr('id'), 10);
            var deckid = $(this).parent().parent().parent().find('td.ftable-deck-name:first').find('span.deck_id:first').text();
            updaterating(deckid, newrating, this);
        });
    });
}

基本上，此功能使表格单元格可供用户内联更新信息。当用户更新某些内容时，它可以正常工作。但是，我还需要处理用户双击单元格（上面函数中由var cell引用的元素）进行编辑但随后单击其他位置（单元格外部）而不进行任何更新或按下Esc键的情况。发生这种情况时，我需要将cell的内容恢复为var oldhtml。

我在SO上发现的几乎所有答案都提到了定义绑定到body标签的全局点击处理程序。但是，如果我这样做，我将如何将oldhtml的值传递给那个显然超出上述函数的处理程序？

Answer 1

你可能会搜索很多，但这是一些与逻辑有关的问题，为什么你没有得到任何答案，你可以尝试使用data()之类的，

.....
   e.preventDefault();
   $('table#tableId').data('oldhtml',$(this).html()); // restore this when clicked outside the cell
.....

现在在单元格外部单击时，您需要从表格ID中获取oldhtml 等，

$(document).on('click',function(e){
    var $elem = $(e.target);

    if((!$elem.hasClass('ratingcell') && // if it is not the td itself
          !$elem.closest('td').hasClass('ratingcell')))// and not its content
    {
        $td=$(elem).hasClass('ratingcell') ? $elem : $elem.closest('td.ratingcell'); // get the td
        if($('table#tableId').data('oldhtml')){
            $td.html($('table#tableId').data('oldhtml'));// set old content
        }
    }
});

JQuery：在外部单击时恢复元素内容

1 个答案: