jQuery-添加2个insertAfter元素，而不是1个

Question

当我选择另一个ID以隐藏其他元素时，我正在尝试insertAfter一个跨度元素。

但是问题是当我选择一次ID时，它会插入一个span元素。然后，当我选择另一个ID时，它应该隐藏插入的span元素，但不会。

稍后，当我再次选择相同的ID时，它会insertsAfter另一个跨度元素。该第二个元素以后可以与隐藏代码一起使用，但是第一个插入的元素不起作用。

它添加#omniva双重元素，并且仅隐藏其中一个

<script>
$("#flat").click(function(){
  $("#show-lp24-select").hide();
  $("#show-omniva24-select").hide();
  $("#text-area-comment").show();
});

$("#lp24").click(function(){
  $("#text-area-comment").hide();
  $("#show-omniva24-select").hide();
  $("#show-lp24-select").insertAfter( $( "#lp24" ) ).show();
});

$("#button-shipping-method").click(function(){
  var selectBoxVal = $("#select-box-lp24").val();    //VALUE OF SELECT BOX
  $("#shipping-method-place").val("LP 24/7 terminalo adresas - "+selectBoxVal);   
});

$("#omniva").click(function(){
  $("#show-lp24-select").hide();
  $("#text-area-comment").hide();
  $("#show-omniva24-select").insertAfter( $( "#omniva" ) ).show();
});

$("#button-shipping-method").click(function(){
  var selectBoxVal = $("#select-box-omniva24").val();    //VALUE OF SELECT BOX
  $("#shipping-method-place").val("Omniva 24/7 terminalo adresas - "+selectBoxVal);   
});
</script>

Answer 1

以下三个概念：

1. 使用.on()作为事件处理程序。
2. 在动态内容上使用delegation。
3. 您可以用逗号分隔 jQuery中的选择器。

仔细查看 未经评论的 更改。 如果失败了... 请查看console。

<script>
$(document).on("click","#flat",function(e){
  console.log("#"+e.target.id+" click!);
  $("#show-lp24-select, #show-omniva24-select").hide();
  $("#text-area-comment").show();
});

$(document).on("click","#lp24",function(e){
  console.log("#"+e.target.id+" click!);
  $("#text-area-comment, #show-omniva24-select").hide();
  $("#show-lp24-select").insertAfter( $( "#lp24" ) ).show();
});

$(document).on("click","#button-shipping-method",function(e){
  console.log("#"+e.target.id+" click!);
  var selectBoxVal = $("#select-box-lp24").val();    //VALUE OF SELECT BOX
  $("#shipping-method-place").val("LP 24/7 terminalo adresas - "+selectBoxVal);
});

$("document).on("click",#omniva",function(e){
  console.log("#"+e.target.id+" click!);
  $("#show-lp24-select, #text-area-comment").hide();
  $("#show-omniva24-select").insertAfter( $( "#omniva" ) ).show();
});

$(document).on("click","#button-shipping-method",function(e){
  console.log("#"+e.target.id+" click!);
  var selectBoxVal = $("#select-box-omniva24").val();    //VALUE OF SELECT BOX
  $("#shipping-method-place").val("Omniva 24/7 terminalo adresas - "+selectBoxVal);
});
</script>

  

«第二个元素以后可以工作...»

...将翻译为“页面刷新后” 或“几天后” ...人们怎么知道？ ;）