Question

请您看看这个演示，让我知道为什么我无法创建动态输入名称选择器？我想要做的是根据Bootstrap Tab功能动态传递选择器的名称。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

扩展@tushar的评论：

当使用变量时，它是undefined，在show.bs.modal
的末尾移动绑定事件的代码

问题是事件show.bs.tab被称为asynchrone，因此当您尝试在$("input:checkbox[name="+checkname+"]")中访问该变量时，不会设置该变量。您可以做什么，以确保在触发change事件时首先绑定show.bs.modal事件。

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

传递动态名称选择器不起作用

1 个答案: