Bootstrap Collapse show.bs.collapseがもう一度動作しない

Question

何かの理由で、まったく同じことを初めてやっていても、2度目のトリガーになることはありません。

基本的に、最初の2つのフィールド（Merchant ProviderとBank）では、ユーザーはドロップダウンリストから選択するか、新しいエントリを追加することができます。だから私はJavascriptで同時に新しい追加のための新しい行を開くために崩壊を使用している私はユーザーが両方の行を（選択し、新しい追加）同時に表示されないように最初の行が隠されています。したがって、最初の行（選択を隠して追加を表示）ではすべてが機能しますが、2行目では折りたたみのみが機能しますが、行を非表示にするJavaScriptは機能しません。

はここ

<div class="form-group" id="merchantRow"> 
    <label class="col-md-3 control-label" for="textinput">Merchant Provider</label> 
    <div class="col-md-7"> 
     <select id="merchantProvider"> 
     <option></option> 
     <option value="AL">Alabama</option> 
     <option value="WY">Wyoming</option> 
     </select> 
    </div> 
    <div class="col-md-2"><a class="btn btn-sm btn-warning" data-toggle="collapse" data-target="#newMerchant"><i class="fa fa-plus"></i></a></div> 
    </div> 

    <div id="newMerchant" class="collapse"> 
    <div class="form-group"> 
     <label class="col-md-3 control-label" for="textinput">New Merchant Name/Slug</label> 
     <div class="col-md-4"> 
     <input id="textinput" name="textinput" type="text" placeholder="Name" class="form-control"> 
     </div> 
     <div class="col-md-3"> 
     <input id="textinput" name="textinput" type="text" placeholder="Slug" class="form-control"> 
     </div> 
     <div class="col-md-2"><a class="btn btn-sm btn-warning" data-toggle="collapse" data-target="#newMerchant"><i class="fa fa-repeat"></i></a></div> 

    </div> 
    </div> 

    <div class="form-group" id="bankRow"> 
    <label class="col-md-3 control-label" for="textinput">Bank</label> 
    <div class="col-md-7"> 
     <select id="bank"> 
     <option></option> 
     <option value="AL">Alabama</option> 
     <option value="WY">Wyoming</option> 
     </select> 
    </div> 
    <div class="col-md-2"><a class="btn btn-sm btn-info" data-toggle="collapse" data-target="#newBank"><i class="fa fa-plus"></i></a></div> 
    </div> 

    <div id="newBank" class="collapse"> 
    <div class="form-group"> 
     <label class="col-md-3 control-label" for="textinput">New Bank Name/Slug</label> 
     <div class="col-md-4"> 
     <input id="textinput" name="textinput" type="text" placeholder="Name" class="form-control"> 
     </div> 
     <div class="col-md-3"> 
     <input id="textinput" name="textinput" type="text" placeholder="Slug" class="form-control"> 
     </div> 
     <div class="col-md-2"><a class="btn btn-sm btn-info" data-toggle="collapse" data-target="#newBank"><i class="fa fa-repeat"></i></a></div> 
    </div> 
    </div> 

はここに私の簡単なJavascriptのです私のHTMLです：

$('#newMerchant').on('show.bs.collapse', function() { 
    $('#merchantRow').toggle(); 
}).on('hide.bs.collapse',function() { 
    $('#merchantRow').toggle(); 
}); 

$('#newbank').on('show.bs.collapse', function() { 
    $('#bankRow').toggle(); 
}).on('hide.bs.collapse',function() { 
    $('#bankRow').toggle(); 
}); 

Answer 1

あなたのHTMLのIDはキャメルケースで、JSセレクタは小文字です。これらは一致する必要があります。

<div id="newBank" class="collapse"> 
$('#newbank').on('show.bs.collapse'...