追加入力jsが動作しない

Question

こんにちは、私は単純なjsで立ち往生しています。私はjs.pleaseで完璧ではない私を助けます。 ので基本的に私は、ドロップダウン上のオープンとクローズのdivをしています最初のdivにその作業罰金を選択するが、私はあなたがデモここjsfiddle demo

を確認したい場合は、最初のdiv

<div class=" col-sm-12 col-xs-12 pull-left special_offers"> 

    <br> 

     <h3> TRANSPORTATION </h3> 

    <div class="controls_special_offers"> 



    <div class="entry_special_offers input-group col-sm-12 col-xs-12 "> 

      <div class="col-sm-3 col-xs-6"> 

       <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-3 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_cartype" 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 rate">  

       <div class="form-group "> 

        <label for="exampleInputindate"> rate </label> 

        <div class="form-group"> 
        <input type="number" name="tc_rate" id="tc_rate" class=" form_line_only form-control" placeholder="Enter Price" value="" autocomplete="off" > 

        </div> 

       </div> 

      </div> 
      <div class="col-sm-3 col-xs-6 adult"> 

       <div class="form-group"> 

        <label for="exampleInputindate"> Adult </label> 

        <div class="form-group"> 
        <input type="number" name="tc_adult" 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_child" 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"> 

          <button class="btn btn-success btn-add add_col" type="button"> 

           <span class="glyphicon glyphicon-plus"></span> 

          </button> 

        </span> 

       </div> 

      <br> 

         </div> 





    </div><!--special_offers--> 





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




    $(function() 

{ 

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

    { 

     e.preventDefault(); 



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

      currentEntry = $(this).parents('.entry_special_offers:first'), 

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



     newEntry.find('input').val(''); 
$("body").on("change", "#transport_cat", function(e) { 
    e.preventDefault(); 
     if($('#transport_cat').val() == 'PVT') { 
      $('.rate').show(); 
     } else { 
      $('.rate').hide(); 
     } 
     if($('#transport_cat').val() == 'SIC') { 
      $('.adult').show(); 
      $('.child').show(); 
     } else { 
      $('.adult').hide(); 
      $('.child').hide();    
     } 
    }); 
     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).parents('.entry_special_offers:first').remove(); 



     e.preventDefault(); 

     return false; 

    }); 

}); 

とその時DIVそのjqueryのconfligを追加追加するとき

Answer 1

jqueryに問題があります。ドキュメントで説明されているように、Selectを使用してchange機能を使用してください。

あなたがしなければならないのは簡単です：

$(".className").change(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();    
    } 
}); 

EDIT： あなたが示すように、偶数秒onchange機能に変更を適用する必要があります。

$(".className").change(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();    
    } 
}); 




$(function() 

{ 

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

{ 

    e.preventDefault(); 



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

     currentEntry = $(this).parents('.entry_special_offers:first'), 

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



    newEntry.find('input').val(''); 
$(".className").change(function(e) { 
    e.preventDefault(); 
    if($('#transport_cat').val() == 'PVT') { 
     $('.rate').show(); 
    } else { 
     $('.rate').hide(); 
    } 
    if($('#transport_cat').val() == 'SIC') { 
     $('.adult').show(); 
     $('.child').show(); 
    } else { 
     $('.adult').hide(); 
     $('.child').hide();    
    } 
}); 
    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).parents('.entry_special_offers:first').remove(); 



    e.preventDefault(); 

    return false; 

}); 

}); 

しかし、そこにされます問題。問題は、同じクラスの2つのselectタグにアクセスしているため、selectタグのオプションの1つだけが選択されている場合、両方のタグに入力タグが表示されることです。これを確認してくださいfiddle