表中的JavaScript模糊函数

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

代码如下：

function EditMode（）{
如果（！编辑）{
$（'.editable'）.attr（'contenteditable'，'true'）；
HtmlEdit（）；
编辑=1；
$（'.mybutton'）.css({
“背景”：“007acc”，
“颜色”：“fff”
});
$（'.mybutton'）.html（'ССааааааа'）；
$（'.mybutton'）.css（“边框”，“1px实体”#007acc”）；
$（'.web table'）.css（“边框”，“2px实体”#007acc”）；
}否则{
$（'.editable'）。取消绑定（'click'）；
编辑=0；
$（'.mybutton'）.css({
“背景”：“fff”，
“颜色”：“000”
});
$（'.web table'）.css（“边框”，“1px实体”#d1d1”）；
$（'.mybutton'）.html（'imk 9;；
$（'.mybutton'）.css（“边框”，“1px实体”#d1d1”）；
$（'.editable'）.attr（'contenteditable'，'false'）；
}
}
函数HtmlEdit（）{
$（'.editable'）。单击（函数（）{
$（this）.keydown（function（）{
如果（event.keyCode==13）{
返回false；
}
})
$（this）.keyup（function（）{
如果（event.keyCode==13）{
$（'.editable'）.blur（）；
}
})
$（this）.find（'.editable'）.blur（function（）{
警报（“它工作”）；
})
})
}

第一个功能通过点击按钮触发，并使拥有

.editable

类的

td

可以通过HTML5进行编辑。 当您按enter键时，第二个功能应禁用

br

（文本编辑内容模式下的下一行），并应将更改保存到DB。当

td

失去焦点时，也应保存更改。因此，我决定使用

模糊

功能

但此代码不会得到警报

当我这样写的时候：

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

我得到一个警报循环：第一次一个警报，第二次二个警报，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>

№报价单IDазаааааа
11234测试fdg dfg
21296жжааааааааEcco1

---

这是提琴：

我认为这是因为当您调用

.blur（）

函数时，您正在为表中的所有单元格调用它。这是您更新的提琴

我在

HtmlEdit（）

函数中进行了更改。我将

$（'.editable'）.blur（）

更改为

$（this）.blur（）

，并将blur函数的绑定移到click函数之外

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);

    }

    });


    })


  })
}

---

我认为这是因为当你调用

.blur（）

函数时，你是在为表中的所有单元格调用它

我在

HtmlEdit（）

函数中进行了更改。我将

$（'.editable'）.blur（）

更改为

$（this）.blur（）

，并将blur函数的绑定移到click函数之外

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);

    }

    });


    })


  })
}

---

您会收到多个警报，因为每次在可编辑字段内单击时，都会向其注册一个额外的blur（）处理程序

在该字段内单击两次后，将有两个处理程序在blur上调用

3点后点击3

keydown和keyup事件也是如此。您只需要注册一次处理程序

$(".editable").keydown(...);
$(".editable").keyup(function() {
    $(this).blur();
});
$(".editable").blur(...);

---

您会收到多个警报，因为每次在可编辑字段内单击时，都会向其注册一个额外的blur（）处理程序

在该字段内单击两次后，将有两个处理程序在blur上调用

3点后点击3

keydown和keyup事件也是如此。您只需要注册一次处理程序

$(".editable").keydown(...);
$(".editable").keyup(function() {
    $(this).blur();
});
$(".editable").blur(...);

---

我们希望您能提供完整的；这意味着应用此代码的HTML，以及仍然显示错误的最小代码总量。我添加了HTMLwhere do you call the

EditMode（）

函数？在按钮上单击-$（“#编辑按钮”）。单击（编辑模式）；这里是小提琴：我们希望您能提供完整的；这意味着应用此代码的HTML，以及仍然显示错误的最少代码总量。我添加了HTMLwhere do you call the

EditMode（）

函数？在按钮上单击-$（“#编辑按钮”）。单击（EditMode）；这里是提琴：@mrdeath4您能提供HTML，最好是JSFIDLE供我们使用吗with@mrdeath4我更新了我的答案，并为youLet-us提供了一个提琴。你的提琴不起作用。当你键入enter或光标处于on位置时，它会发出许多警报TABLE@mrdeath再试试我答案中的那个，它对我有用，我再也做不到了复制你的error@mrdeath4你能提供HTML，最好是JSFIDLE给我们吗with@mrdeath4我更新了我的答案，并为youLet-us提供了一个提琴。你的提琴不起作用。当你键入enter或光标处于on位置时，它会发出许多警报TABLE@mrdeath再试试我答案中的那个，它对我有用，我再也做不到了重现你的错误