使用jQuery按钮在文本和编辑表单之间来回切换 - Use jQuery button to toggle back and forth between text and edit-form

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

$(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>

您还需要在第一个事件处理程序中使用事件委托:

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

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

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

尽管使用$("#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>

请使用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>");

span class="button"将与委托中的click事件相关联。

快乐编码

注。使用class代替id。Id应该被用作页面上的唯一元素，但是元素上的类可以让你更灵活。