on change function также влияет на clone div

Question

Я хочу показать и скрыть базу div на функции изменения .. и ее работа хорошо на первом div всякий раз, когда я добавляю (добавляет) новый div, что функция изменения времени влияет как на div.

$(".transport_type").hide(); 
$(".rate").hide(); 
$(".adult").hide(); 
$(".child").hide(); 
$("body").on("change", "#transport_cat", function(e) { 
e.preventDefault(); 
     if($(this).val() == 'PVT') { 
      $('.rate').show(); 
     } else { 
      $('.rate').hide(); 
     } 
     if($(this).val() == 'SIC') { 
      $('.adult').show(); 
      $('.child').show(); 
     } else { 
      $('.adult').hide(); 
      $('.child').hide();    
     } 
    }); 

вот demo here

я хочу сделать только показать скрыть DIV на изменения, которые не выбрать деление с хотите повлиять на другой div.please мне помочь ...

Answer 1

Пара ошибок:

• не используйте id атрибут для transport_cat элемента, то этот элемент становится клонирован и несколько элементов с одинаковым идентификатором является неправильными
• В то время как hide/show div также задает контекст, только $('.rate').show() покажет все divs с классом тарифов. Так заданный контекст.
• Удалить $("body").on("change", "#transport_cat", function(e) { связывания события изменения при клонировании, как вы используете $.on() метод

Я обновил скрипку - https://jsfiddle.net/swpL5xwp/2/

<select class="form_line_only form-control className transport_cat" name="tr_cartypes[]"> 
      <option selected> Select Tour </option> 
      <option value="PVT"> PVT </option> 
      <option value="SIC"> SIC </option> 
     </select> 


$("body").on("change", ".transport_cat", function(e) { 
    e.preventDefault(); 
    var $context = $(this).parents('.entry_special_offers'); 
    if ($(this).val() == 'PVT') { 
    $('.rate',$context).show(); 
    } else { 
    $('.rate',$context).hide(); 
    } 
    if ($(this).val() == 'SIC') { 
    $('.adult',$context).show(); 
    $('.child',$context).show(); 
    } else { 
    $('.adult',$context).hide(); 
    $('.child',$context).hide(); 
    } 
}); 

Answer 2

Пара вещей, которые нужно посмотреть в,

1. Вы должны найти класс closest entry_special_offers.
2. Вам необходимо исправить вашу текущую реализацию, где вы найдете all элементов с class тариф/взрослый и другие. Вы должны найти их с текущим только entry_special_offers.
3. Также вы указали change событий, которые не требуются.

$(".transport_type").hide(); 
 
$(".rate").hide(); 
 
$(".adult").hide(); 
 
$(".child").hide(); 
 
$("body").on("change", "#transport_cat", function(e) { 
 
    e.preventDefault(); 
 
    if ($(this).val() == 'PVT') { 
 
    $(this).closest(".entry_special_offers").find('.rate').show(); 
 
    } else { 
 
    $(this).closest(".entry_special_offers").find('.rate').hide(); 
 
    } 
 
    if ($(this).val() == 'SIC') { 
 
    $(this).closest(".entry_special_offers").find('.adult').show(); 
 
    $(this).closest(".entry_special_offers").find('.child').show(); 
 
    } else { 
 
    $(this).closest(".entry_special_offers").find('.adult').hide(); 
 
    $(this).closest(".entry_special_offers").find('.child').hide(); 
 
    } 
 
}); 
 

 
$(function() 
 

 
    { 
 

 
    $(document).on('click', '.btn-add', function(e) 
 

 
     { 
 

 
     e.preventDefault(); 
 

 

 

 
     var controlForm = $('.controls_special_offers:first'), 
 

 
      currentEntry = $(this).closest('.entry_special_offers'), 
 

 
      newEntry = $(currentEntry.clone()).appendTo(controlForm); 
 

 

 

 
     newEntry.find('input').val(''); 
 

 
     controlForm.find('.entry_special_offers:not(:last) .btn-add') 
 

 
     .removeClass('btn-add').addClass('btn-remove') 
 

 
     .removeClass('btn-success').addClass('btn-danger') 
 

 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
 

 
     }).on('click', '.btn-remove', function(e) 
 

 
     { 
 

 
     $(this).closest('.entry_special_offers').remove(); 
 

 

 

 
     e.preventDefault(); 
 

 
     return false; 
 

 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container excursions margin_top"> 
 
    <!--container hotel --> 
 
    <div class="controls_special_offers"> 
 
    <div class="entry_special_offers input-group col-sm-12 col-xs-12 "> 
 
     <div class="col-sm-2 col-xs-6"> 
 
     <div class="form-group"> 
 
      <label for="exampleInputindate">Tour</label> 
 
      <div class="form-group"> 
 
      <select class="form_line_only form-control className" name="tr_cartypes[]" id="transport_cat"> 
 
       <option selected>Select Tour</option> 
 
       <option value="PVT">PVT</option> 
 
       <option value="SIC">SIC</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3 col-xs-6 transport_type"> 
 
     <div class="form-group"> 
 
      <label for="exampleInputindate">transportation type</label> 
 
      <div class="form-group"> 
 
      <select class="form_line_only form-control " name="tr_seattype[]"> 
 
       <option selected>Select Type</option> 
 
       <option>7 Seater</option> 
 
       <option>15 Seater</option> 
 
       <option>34 Seater</option> 
 
       <option>50 Seater</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-sm-2 col-xs-6 rate"> 
 
     <div class="form-group "> 
 
      <label for="exampleInputindate">rate</label> 
 
      <div class="form-group"> 
 
      <input type="number" name="tc_rates[]" id="tc_rate" class=" form_line_only form-control" placeholder="Enter Price" value="" autocomplete="off"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-2 col-xs-6 adult"> 
 
     <div class="form-group"> 
 
      <label for="exampleInputindate">Adult</label> 
 
      <div class="form-group"> 
 
      <input type="number" name="tc_adults[]" id="tc_adult" class=" form_line_only form-control" placeholder="Adult Price" value="" autocomplete="off"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-2 col-xs-6 child"> 
 
     <div class="form-group"> 
 
      <label for="exampleInputindate">Child</label> 
 
      <div class="form-group"> 
 
      <input type="number" name="tc_childs[]" id="tc_child" class=" form_line_only form-control" placeholder=" Child Price " value="" autocomplete="off"> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <span class="input-group-btn day_plan pull-left"> 
 
\t \t \t \t <button class="btn btn-success btn-add add_col" type="button"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-plus"></span> 
 
     </button> 
 
     </span> 
 
    </div> 
 
    <br> 
 
    </div> 
 
</div>