使用 jQuery 按钮在文本和编辑表单之间来回切换

Question

我正在尝试实现一个编辑功能，它允许我在文本元素和表单元素之间来回切换。附加代码的当前功能是正确的，除了编辑按钮在单击“取消”后重新出现时变得不起作用。我使用事件委托来使创建的“取消”按钮起作用，但现在我需要以某种方式将其圈回顶部。

$(document).ready(function() {
  $("#edit").click(function() {
    var fruit = $("p").html();
    var editbutton = $("#button").html();
    $("#button").html("<input id='submit' type='button' value='submit' /><input id='cancel' type='button' value='cancel' />");
    $("p").html("<input type='text' value='" + fruit + "' />");

    $("#button").on('click', '#cancel', function() {
      $("#button").html(editbutton);
      $("p").html(fruit);
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Apple</p>
<span id='button'><input id='edit' type='button' value=edit /></span>

Answer 1

您也需要在第一个事件处理程序中使用event delegation：

$("#button").on('click', '#edit', function() {
   // ...
});

Answer 2

问题是您在创建取消按钮时破坏了编辑按钮，因此，在您重新创建事件侦听器时不会保留它。对此的一种解决方案是始终动态创建编辑按钮，并使用事件委托将侦听器附加到它（就像您已经拥有的取消按钮一样）。

或者，当您显示提交/取消按钮时，您可以简单地隐藏它，并在您希望它再次可见时取消隐藏，而不是销毁它。

Answer 3

尽管使用$("#button").on('click', '#edit', function() { } 是一种合理、快速且简单的修复方法，但恕我直言，它不一定是最佳解决方案。原因是您在事件处理程序中绑定事件处理程序。更好的解决方案可能是 (1) 创建所有必要的操作按钮并根据内容的状态（静态或正在编辑）切换它们的可见性；或 (2) 动态创建和销毁按钮（由于大量的 DOM 操作而不是最佳的）。

我的代码可能看起来过于复杂，但它是模块化的——您可以将它应用到任何 .editable 和 .controls 对，并将切换状态存储在 jQuery .data() 对象中。

$(function() {
  
  // Assign value
  $('input.editable').val($('input.editable').prev('.editable').text());
  
  // Bind click event
  $('.controls').on('click', 'button', function() {
    var status = $(this).closest('.controls').data('status');
    if(status && status === 'static') {
      // Toggle controls
      $(this)
      .closest('.controls')
        .data('status', 'edit')
        .end()
      .siblings('button.'+status)
        .show()
        .end()
      .hide();
      
      // Toggle inputs
      $(this)
      .closest('.controls')
      .prevAll('p.editable')
        .hide()
        .end()
      .prevAll('input.editable')
        .show();
    } else {
      // Toggle controls
      $(this)
      .closest('.controls')
        .data('status', 'static')
        .end()
      .siblings('button.'+status)
        .show()
        .end()
      .hide();
      
      // Toggle inputs
      $(this)
      .closest('.controls')
      .siblings('p.editable')
        .show()
        .end()
      .siblings('input.editable')
        .hide();
    }
    
    // Update text if submit button is pressed
    if($(this).data('action') === 'submit') {
      $(this)
      .closest('.controls')
      .siblings('p.editable')
      .text($(this).closest('.controls').siblings('input.editable').val());
    }
  });
});

input.editable {
  display: none;
}
.controls button {
  display: inline-block;
}
  .controls button.static {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p class="editable">Apple</p>
<input class="editable" type="text" />
<div class="controls" data-status="static">
  <button type="button" class="edit" data-action="edit">Edit</button>
  <button type="button" class="static" data-action="submit">Submit</button>
  <button type="button" class="static" data-action="cancel">Cancel</button>
</div>

Answer 4

请使用jquery函数.delegate

这在几个场合拯救了我的皮肤。

$(document).delegate('.button', 'click', function(){ 
     //do what you need here
});

这个函数与其他函数有何不同，除了它如何将功能绑定到元素之外，并没有什么不同。

上面只是说：

1) 在文档元素上绑定以下内容

2) 每次找到 .button 或在此文档中创建具有 button 类的元素时

• 附加点击事件处理程序 &
• 运行回调。

即使你这样做

 $('.container_element).append("<span class='button'><input id='edit' type='button' value=edit /></span>");

带有 class="button" 的 span 将与委托中的 click 事件一起附加。

愉快的编码

附言使用类而不是 id。 id 应该用作页面上的唯一元素，但是元素上的类可以让您更灵活。