通过动态名称选择器不工作

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'); 
    } 
    }); 
}