javascript - 用带标签的 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>