单击功能仅适用一次(因为选择器已被删除并再次添加)

Question

我设法解雇了

$('.edit').click(function(){} 和 $('.button').click(function(e){}

$('.edit').click(function(){
  // uid = userid
  var uid = '123';
  var self = $(this);
  // closest in the parent elements
  // use .find with caution unless you sure you have only one .input
  // contenteditable makes element editable. use with caution as it accepts html tags, javascript
  // .addClass for styling
  var input = self.closest('tr').find('.input');
  input.attr('contenteditable','true').addClass('editable');
  self.closest('td').html('<span class="button">Save</span>');
  $('.button').click(function(e){
    e.preventDefault();
    var field = $(this).closest('tr').data('field');
    // get text instead of html from editable tr
    var value = $(this).closest('tr').find('.input.editable').text();
    if (value.length > 0) {
      var dataString = 'edit_info=' + uid + '&field=' + field + '&value=' + value;
      alert(dataString);
      //		$.ajax({
      //			type: "POST",
      //      url: "ajax.php",
      //      data: dataString,
      //      success: function(data){
      //      	if (data == 'success') {
      input.attr('contenteditable','false').removeClass('editable');
      $(this).closest('td').html('<span class="edit">Edit Info</span>');
      //				}
      //			}
      //		});
      return false;
    };
  });
  return false;
});

table tr td {
  padding: 12px 15px;
  border-bottom: 1px solid #d6d6d6;
  box-sizing: border-box;
}

.edit {
  color: blue;
  cursor: pointer;
}

.editable {
  background-color: #FFF;
  border: 1px solid #d6d6d6;
}

.button {
  background-color: blue;
  color: #FFF;
  border-radius: 8px;
  line-height: 18px;
  padding: 5px 8px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-field="name">
    <td>Name</td>
    <td class="input">John Doe</td>
    <td><span class="edit">Edit Info</span></td>
  </tr>
  <tr data-field="email">
    <td>Email</td>
    <td class="input">johndoe@email.com</td>
    <td><span class="edit">Edit Info</span></td>
  </tr>
</table>

但它只能工作一次.有谁能解释为什么？

这是我的小提琴:https://jsfiddle.net/michaelyuen/s7d06ra8/6/

Answer 1

问题是因为您.edit要从DOM中删除元素并创建一个新元素.当您删除原始文件时,其单击处理程序与它一起使用,并且新副本没有分配单击处理程序.

解决此问题的最佳方法是使用委托事件处理程序,如下所示:

$(document).on('click', '.edit', function(e) {
  e.preventDefault();
  var $self = $(this);
  var $input = $self.closest('tr').find('.input');

  $input.attr('contenteditable', 'true').addClass('editable');
  $self.closest('td').html('<span class="button">Save</span>');
});

$(document).on('click', '.button', function(e) {
  e.preventDefault();
  var uid = '123';
  var $self = $(this);
  var field = $self.closest('tr').data('field');
  var value = $self.closest('tr').find('.input.editable').text();
  var $input = $self.closest('tr').find('.input');

  if (value.length > 0) {
    var data = {
      edit_info: uid,
      field: field,
      value: value
    }
    console.log(data);

    //	$.ajax({
    //	    type: "POST",
    //      url: "ajax.php",
    //      data: data,
    //      success: function(data){
    //      	if (data == 'success') {
                    $input.attr('contenteditable', 'false').removeClass('editable');
                    $self.closest('td').html('<span class="edit">Edit Info</span>');
    //		    }
    //    	}
    //  });
  };
});

table tr td {
  padding: 12px 15px;
  border-bottom: 1px solid #d6d6d6;
  box-sizing: border-box;
}
.edit {
  color: blue;
  cursor: pointer;
}
.editable {
  background-color: #FFF;
  border: 1px solid #d6d6d6;
}
.button {
  background-color: blue;
  color: #FFF;
  border-radius: 8px;
  line-height: 18px;
  padding: 5px 8px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-field="name">
    <td>Name</td>
    <td class="input">John Doe</td>
    <td><span class="edit">Edit Info</span>
    </td>
  </tr>
  <tr data-field="email">
    <td>Email</td>
    <td class="input">johndoe@email.com</td>
    <td><span class="edit">Edit Info</span>
    </td>
  </tr>
</table>

另请注意,我修改了您的AJAX请求以在对象中发送信息,而不是将查询字符串混合在一起.这样既有更容易维护的好处,也意味着jQuery将为您编码任何特殊字符.