表格中的 JavaScript 模糊函数

Question

我的模糊事件有问题。它会触发多次而不是 1 次。

代码如下:

function EditMode() {
  if (!edit) {

    $('.editable').attr('contenteditable', 'true');
    HtmlEdit();
    edit = 1;
    $('.mybutton').css({
      "background": "#007acc",
      "color": "#fff"
    });
    $('.mybutton').html('Сохранить');
    $('.mybutton').css("border", "1px solid #007acc");
    $('.web-table').css("border", "2px solid #007acc");

  } else {
    $('.editable').unbind('click');
    edit = 0;
    $('.mybutton').css({
      "background": "#fff",
      "color": "#000"
    });
    $('.web-table').css("border", "1px solid #d1d1d1");
    $('.mybutton').html('Изменить');
    $('.mybutton').css("border", "1px solid #d1d1d1");
    $('.editable').attr('contenteditable', 'false');
  }
}

function HtmlEdit() {
  $('.editable').click(function() {

    $(this).keydown(function() {
      if (event.keyCode == 13) {
        return false;

      }
    })

    $(this).keyup(function() {
      if (event.keyCode == 13) {
        $('.editable').blur();

      }
    })

    $(this).find('.editable').blur(function() {
      alert('it works');
    })
  })
}

第一个函数由单击按钮触发，并使具有 .editable 类的 td - 可使用 HTML5 进行编辑。第二个函数应该禁用 br(文本编辑内容模式下的下一行)”，当你按下 enter 时，应该将更改保存到数据库。同样，当 td 失去焦点。所以我决定使用 blur 函数。

但是这段代码没有得到警报。

当我这样写的时候:

$(this).blur(function() { alert('it works'); 

我得到一个警报循环:第一次警报，第二次警报 2，3d - 3，有时 2 或 3 没有任何逻辑。你能帮助我吗？我只需要运行一次模糊函数。

HTML代码:

<table class="web-table" style="border: 2px solid rgb(0, 122, 204);">
<tbody>
<tr><th id="off_col_num">№</th><th id="off_col_id">offer ID</th><th id="off_col_name">Название</th><th id="off_col_geo">Geo</th></tr>
<tr><td>1</td><td class="editable" contenteditable="true">1234</td><td class="editable" contenteditable="true">test fdg dfg</td><td></td></tr>
<tr><td>2</td><td class="editable" contenteditable="true">1296</td><td class="editable" contenteditable="true">Кожаные кроссовки Ecco</td><td>1</td></tr>
</tbody>
</table>

这是 fiddle :https://jsfiddle.net/az4koq96/

Answer 1

我认为这是因为当您调用 .blur() 函数时，您是在为表格中的所有单元格调用它。这是你更新的 fiddle https://jsfiddle.net/az4koq96/1/

我所做的更改是在 HtmlEdit() 函数中。我将 $('.editable').blur() 更改为 $(this).blur() 并将模糊函数的绑定(bind)移动到点击函数之外

var edit = 0;
$('#offer-edit-button').click(EditMode);

function EditMode()
{
  if (!edit) {
   //TableEdit(); 
   $('.editable').attr('contenteditable', 'true');
   HtmlEdit(); edit=1;
   $('.mybutton').css({"background": "#007acc", "color": "#fff"});
   $('.mybutton').html('Save');
   $('.mybutton').css("border", "1px solid #007acc");
   $('.web-table').css("border", "2px solid #007acc");

  }
  else {
   $('.editable').unbind('click'); edit = 0 ;
   $('.mybutton').css({"background": "#fff", "color": "#000"});
   $('.web-table').css("border", "1px solid #d1d1d1");
   $('.mybutton').html('Edit');
   $('.mybutton').css("border", "1px solid #d1d1d1");
   $('.editable').attr('contenteditable', 'false');
  }
}

function HtmlEdit()
{
  $('.editable').click(function ()
  {

    $(this).keydown(function(){
            if(event.keyCode==13)
            {
             return false;

            }
    })  

    $(this).keyup(function(){
            if(event.keyCode==13)
            {
             $(this).blur();

            }
    })  


    $(this).off('blur');
    $(this).blur(function() { alert('it works here'); 

    var data = [];
    $.ajax({
    type: "POST",
    data: {"data": data},        
    url: "inc/save-offer.php",
    success: function (anwser)
    {
      $('#aw-wrapper').html(anwser);

    }

    });


    })


  })
}