关于变化函数也影响克隆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不想影响另一个div.please帮我...

Answer 1

情侣错误：

• 不要使用id属性为transport_cat元素作为该元素得到克隆，并用相同的ID多个元素是错误
• 虽然隐藏/显示div，设置上下文，只是$('.rate').show()将显示速率类的所有div。所以设置上下文。
• 删除$("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(); 
    } 
});