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或带有按钮类的元素都会在本文档中创建

附加点击事件处理程序＆amp;
运行回调。

即使你这样做

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

带有class =＆＃34;按钮＆＃34;的范围将附加委托中的click事件。

快乐编码

P.S。使用class而不是id。 id应该被用作页面上的唯一元素，但是元素上的类允许你更灵活。

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

4 个答案: