Jquery:切换不工作

Question

我有这样一个HTML页面结构：

<div class="editable>CONTENT
    <span class="multiple-users">span-content</span>
    <span class="multiple-users">span-content2</span>
    <span class="multiple-users">span-content3</span>
</span>

当我使用类“多用户”单击span元素时，我希望它将类“可编辑”的div中的所有内容替换为单击的span的内容。当我单击单击的span的内容时，我希望它恢复到原来的形式，用div中最初的所有内容替换它。

以下是我所拥有的：

$(document).ready(function () {
    $('span.multiple-users').click(function () {
        var id = $(this).text().match(/[0-9]+/);
        var old_html = $(this).closest('div.editable').html();
        var instructor_obj = $(this).closest('div.editable');

        instructor_obj.html("<span id=" + id + " >Instructor ID: " + id + "</span>");

        $('#' + id).click(function () {
            $(this).closest('div.editable').html(old_html);
        });    
    });
}); 

但这做不到我想做的。当我单击class=的span“多用户”时，它将div中的所有内容替换为span内容，当我单击span内容时，它会返回到原来的内容。但是，当我再次尝试单击span时，它并不会将div中的所有内容替换为单击span的内容。

简而言之，它没有正确地切换。你能看到我的密码出了什么问题吗？

Answer 1

您需要委托事件，因为您正在动态地创建新元素。单击span元素时，事件将绑定到已销毁的旧元素，但不绑定到新元素。

$('.editable').on('click', 'span.multiple-users', function () {

检查Fiddle

Answer 2

它真的应该被分成两部分：

<div class="editable">
  <div class="ed-area">
    old content
  </div>
  <div class="control">
    <span>Content One</span>
    <span>Content Two</span>
    <span>Content Three</span>
  </div>
</div>

联署材料：

$(function(){
  var control = $("div").find(".control");
  var oldText = $(".editable").html();
  $.each(control, function(){
    var that = $(this);
    var newText = that.html();
    that.on({
      click:function(){
        var className = that.attr("class");
        if(className){
          fillin = oldText;
        } else {
          fillin = newText;
        }
        that.classToggle("selected");
        $(".editable").html(fillin);
      }
    });
  });
});