使用带有标签的 JQuery 附加单选按钮并使其工作？

Question

我在 JQuery 中附加了一个单选按钮，但由于某种原因，它不会让我在单击标签时选择该按钮。 如果你不使用 jquery，它可以在 HTML 中工作，所以我错过了什么：

$(document).on("shown.bs.modal", "#signmein", function(e) {
  var html = '<input type="radio" name="colour" value="red" id="colour_red"><label for="colour_red">Red</label><br>';
  $('#modalload').append(html);
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button>

<div class="modal" id="signmein">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header ">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
        <h4 class="modal-title">Login</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <div>
                <label>The Field Label</label>
                <div class="input-append">
                  <div class="btn-group pull-left" data-toggle="buttons">
                    <div id="modalload"></div>
                    <br>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>

https://www.bootply.com/yy3eAGjgGG

Answer 1

某处有一个事件处理程序阻止了您的标签的默认行为，我实际上找不到它，但停止事件的传播找到了它。

 $(document).on("click","#modalload label", function (e) { e.stopPropagation(); }); $(document).on("shown.bs.modal","#signmein", function (e) { var html = '<input type="radio" name="colour" value="red" id="colour_red"><label onclick="/*event.stopPropagation();*/" for="colour_red">Red</label><br>'; $('#modalload').html(html); e.preventDefault(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button> <div class="modal" id="signmein"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header "> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h4 class="modal-title">Login</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <div> <label>The Field Label</label> <div class="input-append"> <div class="btn-group pull-left" data-toggle="buttons"> <div id="modalload"></div> <br> </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> </div> </div> </div> </div>