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（右）包含一些元素，当我点击“添加”按钮时，它将移动到Div1（左）但我使用相同的概念将其移回Div2，但不能正常工作。我错过了什么吗？

另一个问题，如何将图像更改为

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

如果元素从Div2移动到Div1。

Answer 1

在动态添加元素时，请使用委托事件处理程序：

$(".dropdown-menu a").click(function() { 
   $(document.body).click(); 
});

这些工作通过将责任（因此名称委托）委派给不变的祖先元素（$(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); }); });是最好的默认值，如果没有其他更接近/方便的话）。在您的示例中document＆amp; .div1可能会做（如果他们永远不会改变）。

e.g。

.div2

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

说明：

目前您有3个DOM就绪处理程序。您可以在3个代码块周围放置一个DOM。
DOM ready 处理程序的较短版本如下：

e.g。

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

Answer 2

您需要委托事件动态添加。您也可以使用单击处理程序来实现此目的。

为div1和div2元素添加一个公共类说$(function(){ // Your code here });：

wrapperDiv

然后使用：

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

Answer 3

由于您注册的事件直接适用于div中的元素，因此无论他们当前处于.div1还是.div2，他们的行为都不会发生变化

您必须使用.on来抓取来自.intro或.div1个孩子的来源为.div2的任何委派点击事件，然后移动瞄准另一个div。

＆＃13;

$(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").on('click', '.roles', function(){
    var role = $(this);
    $(".div1").append(role.detach());
  });
  $(".div1").on('click', '.roles', function(){
    var role = $(this);
    $(".div2").append(role.detach());
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

3 个答案:

说明：