javascript - 如何通过 jQuery 动态添加和删除元素？

Question

$(document).ready(function(){
  var roles = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

  $.each(roles, function(){
    $(".div2").append("<div class='roles'><i class='fa fa-plus-circle'></i><span>" + this + "</span></div>");
  });
});

$(document).ready(function(){
  $(".div2 .roles").click(function(){
    var role = $(this)
    $(".div1").append(role);
  });
});

$(document).ready(function(){
  $(".div1 .roles").click(function(){
    var role = $(this)
    $(".div2").append(role);
  });
});

.div1,.div2 {
  display:inline-block;
}

.div1 {
  width:200px;
  height:230px;
  border: 2px solid rgba(204, 204, 204, 0.2);
  border-radius: 10px;
  margin-right:6px;
  float:left;
}

.div2 {
  width:200px;
  height:230px;
  margin-right:10px;
  background-color: #f8f8f8;
  border-radius: 10px;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="div1"></div>
<div class="div2"></div>

现在，我有两个 div 区域。 Div2(Right) 包含一些元素，当我单击“添加”按钮时，它将移至 Div1(Left) 但我使用相同的概念将其移回 Div2，但无法正常工作。我错过了什么吗？

另外一个问题，如何把图片改成

<i class="fa fa-minus-circle"></i>

如果元素从 Div2 移动到 Div1。

Answer 1

由于元素是动态添加的，因此使用委托(delegate)事件处理程序:

$(document).ready(function(){
  $(document).on('click', ".div2 .roles", function(){
    var role = $(this)
    $(".div1").append(role);
  });
});

$(document).ready(function(){
  $(document).on('click', ".div1 .roles", function(){
    var role = $(this)
    $(".div2").append(role);
  });
});

这些通过将责任委派(因此得名 delegated)到不变的祖先元素(document 是最好的默认值，如果没有其他更接近/方便的话)来工作。在您的示例中，.div1 和 .div2 可能会这样做(如果它们永远不会改变)。

例如

$(document).ready(function(){
  $('.div2').on('click', ".roles", function(){
    var role = $(this)
    $(".div1").append(role);
  });
});

$(document).ready(function(){
  $('.div1').on('click', ".roles", function(){
    var role = $(this)
    $(".div2").append(role);
  });
});

这是通过列出事件(例如点击)冒泡到祖先来实现的。 然后将 jQuery 选择器仅应用于气泡链中的元素。 然后仅将函数应用于导致事件的匹配元素。结果是元素只需要在点击时存在，而不是在注册点击时存在。

注意事项:

• 目前您有 3 个 DOM 就绪处理程序。您可以围绕 3 个代码块准备好一个 DOM。
• DOM 就绪 处理程序的较短版本如下:

例如

$(function(){
   // Your code here
});