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元素时，我希望它将“editable”类的div中的所有内容替换为单击的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 =“multiple-users”时，它会使用span-content替换div中的所有内容，当我单击span-content时，它将恢复为原始内容。但是，当我再次尝试单击跨度时，它不会替换div中的所有内容，并且单击了跨度的内容。

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

Answer 1

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

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

<强> Check 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>

JS：

$(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);
      }
    });
  });
});

Jquery：切换不工作

2 个答案: