通過動態名稱選擇器不工作

Question

你可以看看這個演示，讓我知道爲什麼我不能創建一個動態輸入名稱選擇器？我正在嘗試的是基於Bootstrap Tab功能動態地傳遞選擇器的名稱。

var checkname; 
 

 
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { 
 
    var target = $(e.target).attr("href") // activated tab 
 
    checkname = target.substring(1); 
 
}); 
 

 

 
$("input:checkbox[name=" + checkname + "]").on('change', function() { 
 
    if ($(this).is(':checked')) { 
 
    alert('Checked'); 
 
    } else { 
 
    alert('Un Checked'); 
 
    } 
 
});

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="col-md-3"> 
 
    <ul id="myTab" class="nav nav-tabs"> 
 
     <li class="active"><a href="#home" data-toggle="tab">Home</a> 
 
     </li> 
 
     <li class=""><a href="#profile" data-toggle="tab">Profile</a> 
 
     </li> 
 
    </ul> 
 
    <div id="myTabContent" class="tab-content"> 
 
     <div class="tab-pane fade active in" id="home"> 
 
     <input type="checkbox" name="home" value="unit-in-group">Home 
 
     </div> 
 
     <div class="tab-pane fade" id="profile"> 
 
     <input type="checkbox" name="profile" value="unit-in-group">Profile 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

爲了延長@圖莎爾的評論：

的時候，當變量用於這是undefined，在show.bs.modal

年底移動綁定事件的代碼

問題是事件show.bs.tab是calle d asynchrone，因此當您嘗試在$("input:checkbox[name="+checkname+"]")中訪問該變量時，變量將不會被設置。您可以執行的操作確保您在show.bs.modal事件觸發時首先綁定change事件。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    // Activated tab 
    var target = $(e.target).attr("href"); 
    // When we have the target we can bind the change event - not before! 
    bindChange(target.slice(1)); 
}); 

function bindChange(checkname) { 

    $("input:checkbox[name="+checkname+"]").on('change', function(){ 
    if ($(this).is(':checked')) { 
     alert('Checked'); 
    } 
    else { 
     alert('Un Checked'); 
    } 
    }); 
}