代码之家 › 专栏 › 技术社区 › Bijan

jQuery事件范围不起作用

forms jquery javascript

2

Bijan · 技术社区 · 7 年前

我有一个页面有一个表,但我想让用户选择使其中一个字段可编辑。

<a class='noteedit'><i class='material-icons blue-text'>edit</i></a>

在我的JS里

$(".noteedit").click(function(){
    obj = $(this).parent().parent(); // get entire row
    cell = $(obj).find("td:eq(1)"); // get current value of cell
    $(obj).find("td:eq(2)").remove(); // remove adjacent cell
    cell.replaceWith("<td><form><input name='noteedit' value='" + cell.text() +"'></td><td><a onclick=\"$(this).parent().parent().find('form').submit();\"  class='noteeditsubmit'><i class='material-icons green-text'>send</i></a><a  class='noteeditcancel'><i class='material-icons grey-text'>cancel</i></a></form></td>") // Change cell to become a form and change adjacent cell be the submit button.
    $(".noteeditcancel").click(function(){
        // Convert cell from <form> to just its original value
        // Change Submit/Cancel icon to original Edit button
    });
});

问题是,一旦将单元格值转换为原始编辑按钮,就无法再单击该按钮,因为事件绑定不在范围内。

所以,我如何才能解决这个问题,并有一个比我现在正在做的更好的解决方案。

我的目标是有一个编辑按钮,它可以将单元格转换为可提交的表单,还可以有一个取消按钮来还原为原始值

4 回复 | 直到 7 年前

1

smilebomb 7 年前

为了扩展hev1的答案,此语法允许您在 document ,这就是一切。你可以改变 文件 如果你想的话,可以直接问一个小问题。

$(document).on('click', '.noteedit', function(){
    //might as well do the same for your edit button
});
$(document).on('click', '.noteeditcancel', function(){
    // again, any class of 'noteeditcancel' under the scope of document, even if created dynamically, will listen
});

2

1

ferhado 7 年前

下面是一个可以帮助您的示例:

var oldValues = {};

$(".noteedit").click(function() {
  var uniqueSelector = $(this).closest('tr').index();
  var cell = $(this).closest('tr').find('td:eq(0)');
  oldValues[uniqueSelector] = cell.text();
  cell.html(`<form><input name='noteedit' value="${oldValues[uniqueSelector]}" onchange="inputChanged(this)"></form>`);
  $(this).toggle().siblings().toggle();
});



$(".noteeditcancel").click(function(e) {
  var uniqueSelector = $(this).closest('tr').index();
  var cell = $(this).closest('tr').find('td:eq(0)');
  cell.html(oldValues[uniqueSelector]);
  delete oldValues[uniqueSelector];
  $(this).toggle().siblings().toggle();
});

function inputChanged($this) {
  var uniqueSelector = $($this).closest('tr').index();
  oldValues[uniqueSelector] = $($this).val();
}

* {
  box-sizing: border-box;
}

.table {
  width: 100%;
}

.noteeditsubmit,
.noteeditcancel {
  display: none
}

input {
  width: 100%;
  border-color: #84c4ff;
  padding: 4px 15px
}

td {
  padding: 2px 4px
}

tbody th {
  width: 180px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1 class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <a class='noteedit'><i class='material-icons blue-text'></i> edit</a>
        <a onclick="$(this).parent().parent().find('form').submit()" class='noteeditsubmit'><i class='material-icons green-text'>send</i></a>
        <a class='noteeditcancel'><i class='material-icons grey-text'>cancel</i></a>
      </th>
      <td>Mark</td>
    </tr>
    <tr>
      <th>
        <a class='noteedit'><i class='material-icons blue-text'></i> edit</a>
        <a onclick="$(this).parent().parent().find('form').submit()" class='noteeditsubmit'><i class='material-icons green-text'>send</i></a>
        <a class='noteeditcancel'><i class='material-icons grey-text'>cancel</i></a>
      </th>
      <td>Jacob</td>
    </tr>
    <tr>
      <th>
        <a class='noteedit'><i class='material-icons blue-text'></i> edit</a>
        <a onclick="$(this).parent().parent().find('form').submit()" class='noteeditsubmit'><i class='material-icons green-text'>send</i></a>
        <a class='noteeditcancel'><i class='material-icons grey-text'>cancel</i></a>
      </th>
      <td>Larry</td>
    </tr>
  </tbody>
</table>

3

1

Unmitigated 7 年前

您不应该在另一个事件处理程序中包含事件处理程序。你可以用 $(document).on('click', '.noeeditcancel', function(){}) 侦听具有以下类的所有元素的单击事件 noeeditcancel (甚至是动态创建的)。您可以通过这种方式监听文档中与查询匹配的所有元素上的事件。

$(".noteedit").click(function(){
    obj = $(this).parent().parent(); // get entire row
    cell = $(obj).find("td:eq(1)"); // get current value of cell
    $(obj).find("td:eq(2)").remove(); // remove adjacent cell
    cell.replaceWith("<td><form><input name='noteedit' value='" + cell.text() +"'></td><td><a onclick=\"$(this).parent().parent().find('form').submit();\"  class='noteeditsubmit'><i class='material-icons green-text'>send</i></a><a  class='noteeditcancel'><i class='material-icons grey-text'>cancel</i></a></form></td>") 
});
$(document).on('click', '.noteeditcancel', function(){

});

4

0

Denis S Dujota 7 年前

您可以将两个单击事件相互嵌套

$('.noteedit').click(function(e) {
   e.stopPropagation();

    // Your code here 
    $(document).on('click', '.noteeditcancel', function(e) {
    // Your follow up code here 
  });
});