ドロップダウン選択で値が変更されない

Question

選択時にul liを使用して作成したドロップダウンを作成しました.2番目の選択バーの値が変更されるようになりました。問題は、2番目の選択バーの値が変更され、バーは私のために働いていない誰もこの懸念で私を助けることができます。

ユーザーが最初のオプションで選択を行わずに寝室を選択した場合、完璧に機能しているとしますが、ユーザーがコンドハウスまたはオフィスから選択を変更しようとしたときに2番目の選択バーの値が変更され、値が変更されると、ユーザーは2番目のフィールドで選択を行うことができません。意味を理解しています。あなたが見て選ぶことができれば説明がうまくいかず、あなたは私の質問を理解できます。

$(document).ready(function() { 
 
    $('.mc-select').on('click', function() { 
 
\t  $('.mc-options', this).toggle(); 
 
    }); 
 
}); 
 

 
$('.htype_opt').on('click', function() { 
 
\t var mc_val = $(this).attr('data-type'); 
 
\t $('#htype').text(mc_val); 
 
\t $('.htype').val(mc_val); 
 
\t 
 
\t if(mc_val == 'Condo') { 
 
\t \t $('.dt_bed_ch').text('Studio'); 
 
\t \t var new_ul_data = '<li class="mc-option bedroom_opt" data-bedroom="0">Studio</li><li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li>'; 
 
\t \t $('.dt_bed').html(new_ul_data); 
 
\t } 
 
\t 
 
\t if(mc_val == 'House') { 
 
\t \t $('.dt_bed_ch').text('1 Bedroom'); 
 
\t \t var new_ul_data = '<li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li>'; 
 
\t \t $('.dt_bed').html(new_ul_data); 
 
\t } 
 
\t 
 
\t if(mc_val == 'Office') { 
 
\t \t $('.dt_bed_ch').text('Open space'); 
 
\t \t var new_ul_data = '<li class="mc-option bedroom_opt" data-bedroom="0">Open space</li><li class="mc-option bedroom_opt" data-bedroom="1">1 Room</li><li class="mc-option bedroom_opt" data-bedroom="2">2 Rooms</li><li class="mc-option bedroom_opt" data-bedroom="3">3 Rooms</li><li class="mc-option bedroom_opt" data-bedroom="4">4 Rooms</li><li class="mc-option bedroom_opt" data-bedroom="5">5 Rooms</li>'; 
 
\t \t $('.dt_bed').html(new_ul_data); 
 
\t } 
 
\t 
 
\t var type \t = mc_val; 
 
\t var city \t = $('.city').val(); 
 
\t var bedroom = $('.bedroom').val(); 
 
\t var bathroom = $('.bathroom').val(); 
 
\t var area \t = $('.area').val(); 
 
\t var pkg \t = $('.pkg').val(); 
 
\t 
 
\t $.ajax({ 
 
\t \t type \t : "POST", 
 
\t \t url \t : "http://bluevisionarydesigns.com/demo/unick/home/get_data", 
 
\t \t dataType : "text", 
 
\t \t data \t : {city: city, type : mc_val, bedroom : bedroom, bathroom : bathroom, area : area, pkg : pkg}, 
 
\t \t success \t : function(data) { 
 
\t \t \t $('.estimate-amount').text(data); 
 
\t \t } 
 
\t }); 
 
}); 
 

 
$('.bedroom_opt').on('click', function() { 
 
\t var mc_val = $(this).attr('data-bedroom'); 
 
\t var mc_val2 = $(this).text(); 
 
\t $('#bedroom').text(mc_val2); 
 
\t $('.bedroom').val(mc_val); 
 
\t 
 
\t alert(mc_val); 
 
\t var type \t = $('.htype').val(); 
 
\t var city \t = $('.city').val(); 
 
\t var bedroom = mc_val; 
 
\t var bathroom = $('.bathroom').val(); 
 
\t var area \t = $('.area').val(); 
 
\t var pkg \t = $('.pkg').val(); 
 
\t 
 
\t $.ajax({ 
 
\t \t type \t : "POST", 
 
\t \t url \t : "http://bluevisionarydesigns.com/demo/unick/home/get_data", 
 
\t \t dataType : "text", 
 
\t \t data \t : {city: city, type : type, bedroom : mc_val, bathroom : bathroom, area : area, pkg : pkg}, 
 
\t \t success \t : function(data) { 
 
\t \t \t $('.estimate-amount').text(data); 
 
\t \t } 
 
\t }); 
 
});

.search-bar form .input-group .mc-select { 
 
    position: relative; 
 
} 
 

 
.mc-select { 
 
    min-width: 100px; 
 
    float:left; 
 
    border: 1px solid #dce1e5; 
 
    cursor: pointer; 
 
    position: relative; 
 
    font-size: 16px; 
 
    background-color:#fff; 
 
} 
 

 
.mc-select .mc-value { 
 
    height: 62px; 
 
    line-height: 62px; 
 
    padding: 0 15px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
.mc-select .mc-options { 
 
    height: auto; 
 
    position: absolute; 
 
    width: calc(100% + 2px); 
 
    -webkit-transition: height 350ms 0s cubic-bezier(.165,.84,.44,1); 
 
    -moz-transition: height 350ms 0s cubic-bezier(.165,.84,.44,1); 
 
    -ms-transition: height 350ms 0s cubic-bezier(.165,.84,.44,1); 
 
    -o-transition: height 350ms 0s cubic-bezier(.165,.84,.44,1); 
 
    transition: height 350ms 0s cubic-bezier(.165,.84,.44,1); 
 
    -webkit-transform: translateX(-1px); 
 
    -moz-transform: translateX(-1px); 
 
    -ms-transform: translateX(-1px); 
 
    -o-transform: translateX(-1px); 
 
    transform: translateX(-1px); 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    border-left: 0 solid transparent; 
 
    border-right: 0 solid transparent; 
 
    border-bottom: 0 solid transparent; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    display:none; 
 
    z-index: 9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="search-bar"> 
 
<form method="POST"> 
 
\t \t \t <!-- =========================================================== --> 
 
\t \t \t <div class="input-group "> 
 
\t \t \t \t <div class="mc-select"> 
 
\t \t \t \t \t <div class="mc-value" id="htype">Condo</div> 
 
\t \t \t \t \t <ul class="mc-options"> 
 
\t \t \t \t \t \t <li class="mc-option htype_opt" data-type="Condo">Condo</li> 
 
\t \t \t \t \t \t <li class="mc-option htype_opt" data-type="House">House</li> 
 
\t \t \t \t \t \t <li class="mc-option htype_opt" data-type="Office">Office</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <input type="hidden" name="htype" class="htype" value="Condo" /> 
 
\t \t \t </div> <!-- End of input Group --> 
 
\t \t \t 
 
\t \t \t <!-- =========================================================== --> 
 
\t \t \t <div class="input-group "> 
 
\t \t \t \t <div class="mc-select"> 
 
\t \t \t \t \t <div class="mc-value dt_bed_ch" id="bedroom">Studio</div> 
 
\t \t \t \t \t <ul class="mc-options dt_bed"> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="0">Studio</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <input type="hidden" name="bedroom" class="bedroom" value="0" /> 
 
\t \t \t </div> <!-- End of input Group --> 
 
     </form> 
 
     </div>

Answer 1

あなたが最初のドロップダウンで選択を変更するときは、2番目のドロップダウンで真新しい<li>要素を作成しています。これらの要素には「クリック」イベントがバインドされていないため、ユーザーが選択すると何も起こりません。

$('.bedroom_opt').on('click', function() { 
... 

bedroom_optクラスを持つすべての既存の<li>要素にクリックイベントハンドラを添付：あなたは、コードを実行したときの要素が存在していなかったので、

です。

は、このラウンドを取得するには、イベントの委任使用することができます。そして、これは常に存在するdt_bed要素にイベントハンドラをアタッチ

$('.dt_bed').on('click', '.bedroom_opt', function() { 

が、代表者に指定することを下に発生したすべてのクリックイベントを（この場合、bedroom_optクラスを持つ要素）、イベントが処理されるたびにこれを動的に実行するので、いつでも追加された要素に対処できます。詳細情報については

、http://api.jquery.com/on/を見ると題した章「ダイレクトと委任イベント」を読ん

Answer 2

あなたはそれのためのHTMLを生成した後だけ.bedroom_optのイベントリスナーをアタッチするのに必要な、非常に接近していた：

$(document).ready(function() { 
 
    $('.mc-select').on('click', function() { 
 
    $('.mc-options', this).toggle(); 
 
    }); 
 

 

 
    $('.htype_opt').on('click', function() { 
 
    var mc_val = $(this).attr('data-type'); 
 
    $('#htype').text(mc_val); 
 
    $('.htype').val(mc_val); 
 

 
    if (mc_val == 'Condo') { 
 
     $('.dt_bed_ch').text('Studio'); 
 
     var new_ul_data = '<li class="mc-option bedroom_opt" data-bedroom="0">Studio</li><li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li>'; 
 
     $('.dt_bed').html(new_ul_data); 
 
    } 
 

 
    if (mc_val == 'House') { 
 
     $('.dt_bed_ch').text('1 Bedroom'); 
 
     var new_ul_data = '<li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li>'; 
 
     $('.dt_bed').html(new_ul_data); 
 
    } 
 

 
    if (mc_val == 'Office') { 
 
     $('.dt_bed_ch').text('Open space'); 
 
     var new_ul_data = '<li class="mc-option bedroom_opt" data-bedroom="0">Open space</li><li class="mc-option bedroom_opt" data-bedroom="1">1 Room</li><li class="mc-option bedroom_opt" data-bedroom="2">2 Rooms</li><li class="mc-option bedroom_opt" data-bedroom="3">3 Rooms</li><li class="mc-option bedroom_opt" data-bedroom="4">4 Rooms</li><li class="mc-option bedroom_opt" data-bedroom="5">5 Rooms</li>'; 
 
     $('.dt_bed').html(new_ul_data); 
 
    } 
 

 
    var type = mc_val; 
 
    var city = $('.city').val(); 
 
    var bedroom = $('.bedroom').val(); 
 
    var bathroom = $('.bathroom').val(); 
 
    var area = $('.area').val(); 
 
    var pkg = $('.pkg').val(); 
 

 
    $.ajax({ 
 
     type: "POST", 
 
     url: "http://bluevisionarydesigns.com/demo/unick/home/get_data", 
 
     dataType: "text", 
 
     data: { 
 
     city: city, 
 
     type: mc_val, 
 
     bedroom: bedroom, 
 
     bathroom: bathroom, 
 
     area: area, 
 
     pkg: pkg 
 
     }, 
 
     success: function(data) { 
 
     $('.estimate-amount').text(data); 
 
     } 
 
    }); 
 

 

 
    $('.bedroom_opt').off('click').on('click', function() { 
 
     var mc_val = $(this).attr('data-bedroom'); 
 
     var mc_val2 = $(this).text(); 
 
     $('#bedroom').text(mc_val2); 
 
     $('.bedroom').val(mc_val); 
 

 
     alert(mc_val); 
 
     var type = $('.htype').val(); 
 
     var city = $('.city').val(); 
 
     var bedroom = mc_val; 
 
     var bathroom = $('.bathroom').val(); 
 
     var area = $('.area').val(); 
 
     var pkg = $('.pkg').val(); 
 

 
     $.ajax({ 
 
     type: "POST", 
 
     url: "http://bluevisionarydesigns.com/demo/unick/home/get_data", 
 
     dataType: "text", 
 
     data: { 
 
      city: city, 
 
      type: type, 
 
      bedroom: mc_val, 
 
      bathroom: bathroom, 
 
      area: area, 
 
      pkg: pkg 
 
     }, 
 
     success: function(data) { 
 
      $('.estimate-amount').text(data); 
 
     } 
 
     }); 
 
    }); 
 

 
    }); 
 

 
});

.search-bar form .input-group .mc-select { 
 
    position: relative; 
 
} 
 

 
.mc-select { 
 
    min-width: 100px; 
 
    float: left; 
 
    border: 1px solid #dce1e5; 
 
    cursor: pointer; 
 
    position: relative; 
 
    font-size: 16px; 
 
    background-color: #fff; 
 
} 
 

 
.mc-select .mc-value { 
 
    height: 62px; 
 
    line-height: 62px; 
 
    padding: 0 15px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
.mc-select .mc-options { 
 
    height: auto; 
 
    position: absolute; 
 
    width: calc(100% + 2px); 
 
    -webkit-transition: height 350ms 0s cubic-bezier(.165, .84, .44, 1); 
 
    -moz-transition: height 350ms 0s cubic-bezier(.165, .84, .44, 1); 
 
    -ms-transition: height 350ms 0s cubic-bezier(.165, .84, .44, 1); 
 
    -o-transition: height 350ms 0s cubic-bezier(.165, .84, .44, 1); 
 
    transition: height 350ms 0s cubic-bezier(.165, .84, .44, 1); 
 
    -webkit-transform: translateX(-1px); 
 
    -moz-transform: translateX(-1px); 
 
    -ms-transform: translateX(-1px); 
 
    -o-transform: translateX(-1px); 
 
    transform: translateX(-1px); 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    border-left: 0 solid transparent; 
 
    border-right: 0 solid transparent; 
 
    border-bottom: 0 solid transparent; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    display: none; 
 
    z-index: 9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="search-bar"> 
 
    <form method="POST"> 
 
    <!-- =========================================================== --> 
 
    <div class="input-group "> 
 
     <div class="mc-select"> 
 
     <div class="mc-value" id="htype">Condo</div> 
 
     <ul class="mc-options"> 
 
      <li class="mc-option htype_opt" data-type="Condo">Condo</li> 
 
      <li class="mc-option htype_opt" data-type="House">House</li> 
 
      <li class="mc-option htype_opt" data-type="Office">Office</li> 
 
     </ul> 
 
     </div> 
 
     <input type="hidden" name="htype" class="htype" value="Condo" /> 
 
    </div> 
 
    <!-- End of input Group --> 
 

 
    <!-- =========================================================== --> 
 
    <div class="input-group "> 
 
     <div class="mc-select"> 
 
     <div class="mc-value dt_bed_ch" id="bedroom">Studio</div> 
 
     <ul class="mc-options dt_bed"> 
 
      <li class="mc-option bedroom_opt" data-bedroom="0">Studio</li> 
 
      <li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li> 
 
      <li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li> 
 
      <li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li> 
 
      <li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li> 
 
      <li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li> 
 
     </ul> 
 
     </div> 
 
     <input type="hidden" name="bedroom" class="bedroom" value="0" /> 
 
    </div> 
 
    <!-- End of input Group --> 
 
    </form> 
 
</div>

あなたが.off('click')を使用して、以前のすべてのイベントリスナーを削除する必要があります注意してください。これを行う方法はほかにもありますが、（documentへの添付のように）意図しないアイテムにリスナーを付けることをやめます。イベントをアイテムにアタッチすると、devツール内の要素にアタッチされているリスナーが表示されるため、デバッグが容易になります。時間クリックまたは任意のイベントではご利用いただけませんeは、バインドされたDOMに将来に来て任意の要素に

Answer 3

あなたはバインドに任意のイベントを持っているときはいつでも一つの親指のルールは、私は、あなたはそれをバインドする必要があります以下を使用してください。

$("body").on('click', 'selector',callback); 

In your case $("body").on('click', '.bedroom_opt',function(){...});