1

我有一个这样的 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>

当我单击具有“多用户”类的跨度元素时，我希望它用单击的跨度的内容替换“可编辑”类的 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" 的跨度时，它会将 div 中的所有内容替换为跨度内容，当我单击跨度内容时，它会恢复为原始内容。但是，当我尝试再次单击跨度时，它不会用单击的跨度内容替换 div 中的所有内容。

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

4

2 回答 2

0

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

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

检查小提琴

于 2013-08-23T23:09:51.637 回答
0

它真的应该分成两部分：

<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);
      }
    });
  });
});
于 2013-08-23T23:28:20.330 回答