Question

我有这个（引导程序4）按钮组，如下所示：

<div id="timeselector" class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active ">
    <input type="radio" name="options" id="sec" autocomplete="off" checked>Second
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="min" autocomplete="off">Minute
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="hr" autocomplete="off">Hour
  </label>
</div>

我想添加一个JS onchange侦听器，并找出按下了哪个（例如Second，Minute或Hour）。我不想为每个按钮添加一个侦听器，因为我的页面上有很多类似的按钮。

我尝试添加以下内容：

$('#timeselector').on("change", function() {
    alert(this)
});

但这不起作用。如果我将“更改”更改为“单击”，它会发出警报，但不会给出选择的内容。

有人可以帮忙吗？谢谢！

Answer 1

您需要使用<div class="col-sm-6 firstchild"> <div class="form-group"> <label class="control-label" for="templateName">Template Name <span class="text-danger">*</span> </label> <span class="help-tip"> <p>Please confirm the Template Name</p> </span> <input class="form-control" type="text" formControlName="templateName" id="templateName" placeholder="Add Template Name" (keydown.Tab)="checkDuplicateTemplates($event)" (blur)="checkDuplicateTemplates($event)" /> <div class="alert alert-danger" *ngIf="!form.controls['templateName'].valid && form.controls['templateName'].touched">You must enter Temaplte Name.</div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="control-label" for="language">Language</label> <span class="help-tip"> <p>Confirm the Language</p> </span> <select class="form-control" formControlName="language" id="language"> <option value="english">English</option> </select> <div class="alert alert-danger" *ngIf="form.controls['language'].hasError('required') && form.controls['language'].touched">You must enter Language.</div> </div> </div>  <div class="form-group"> <label class="control-label" for="approvalrequired">Will be used for External Client:</label> <span class="help-tip"> <p>Select Yes or No</p> </span> <div class="form-inline"> <div class="radio"> <input type="radio" id="externalClientYes" class="form-control" formControlName="approvalrequired" value="Y" /> <label for="externalClientYes">Yes</label> </div> <div class="radio"> <input type="radio" id="externalClientNo" class="form-control" formControlName="approvalrequired" value="N" /> <label for="externalClientNo">No</label> </div> </div> </div>  <div class="form-group emailSubject"> <label class="control-label" for="emailSubject">Subject:</label> <span class="help-tip"> <p>Subject of the email template</p> </span> <textarea class="form-control" rows="3" formControlName="emailSubject" placeholder="Add Email Subject..." maxlength="400" id="emailSubject"></textarea> <div class="alert alert-danger" *ngIf="form.controls['emailSubject'].hasError('required') && form.controls['emailSubject'].touched">You must enter the Email Subject</div> </div>来代替，将事件附加到div内部的click内：

input

$('#timeselector input')

$('#timeselector input').on("click", function() {
  alert(this.id);
});

将更改监听器添加到bootstrap 4按钮组？

1 个答案: