jQuery - добавление 2 элементов insertAfter вместо 1 - PullRequest
Новая
       40

jQuery - добавление 2 элементов insertAfter вместо 1

0 голосов
/ 28 января 2019

Я пытаюсь insertAfter элемент span при выборе другого идентификатора, чтобы скрыть другие элементы.

Но проблема в том, что когда я выбрал ID один раз, он вставляет элемент span,Затем, когда я выбираю другой идентификатор, он должен скрывать вставленный элемент диапазона, но это не так.

Позже, когда я снова выбираю тот же идентификатор, это insertsAfter другой элемент диапазона.Этот второй элемент позже работает с кодом скрытия , но первый вставленный элемент не работает.

Он добавляет #omniva double elemnt и скрывает только один из них

enter image description here

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

1 Ответ

0 голосов
/ 29 января 2019

Три понятия ниже:

  1. Используйте .on() для ваших обработчиков событий.
  2. Используйте делегирование о динамических вещах.
  3. Вы можете разделять запятую селекторы в jQuery.

Внимательно посмотрите на добровольно не комментированные изменения.И если это не удается ... Пожалуйста, посмотрите на консоль . 

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

«Этот второй элемент позже работает ...»

... будет переводиться в "После обновления страницы" или "дней после" ... Как узнать?;)

...