[英]JavaScript change event not triggering when using .trigger()
I have coded up a JavaScript .change()
event so when a radio button selection is changed different things happen, when I manually make this change the event fires and everything is fine. 我已经编写了一个JavaScript
.change()
事件,因此当单选按钮选择更改时,会发生不同的事情,当我手动进行此更改时,该事件将触发并且一切正常。 What is not working is when I call the .trigger("change")
command on the radio button the event does not appear to be firing since none of the code in the .change()
call runs. 不起作用的是,当我在单选按钮上调用
.trigger("change")
命令时,由于.change()
调用中的任何代码均未运行,因此该事件似乎未触发。 What is the proper way of firing an event via JavaScript code? 通过JavaScript代码触发事件的正确方法是什么?
Here is the code I use to make the event call: 这是我用来进行事件调用的代码:
$("input[name=TimespanEntryMode]").trigger("change");
And here is the code that should be ran on a change event: 这是应该在变更事件上运行的代码:
$("input[name=TimespanEntryMode]").change(function ()
{
$("#TimeEntryStartTime").toggleClass("hidden");
$("#TimeEntryEndTime").toggleClass("hidden");
$("#TimeEntryDuration").toggleClass("hidden");
$(".timeEntryBox").val("");
});
As requested the HTML: 按照要求的HTML:
<li>
<label>Time Entry Mode:</label>
<label class="normal">
<input type="radio" id="TimeEntryModeTime" name="TimespanEntryMode" value="true" checked="checked" />Time
</label>
<label class="normal">
<input type="radio" id="TimeEntryModeDuration" name="TimespanEntryMode" value="false" />Duration
</label>
</li>
<li id="TimeEntryStartTime">
<label>Start Time:</label>
@Html.DropDownListFor(m => m.SelectedStartDay, Model.DaysOfTheWeek, new { @class = "dayOfTheWeekSelector", @id = "SelectedStartDay" })
@Html.EditorFor(m => m.StartTime, new { htmlAttributes = new { @class = "timeEntryBox", @id = "StartTimeEntryBox", @readonly = "readonly" } })
</li>
<li id="TimeEntryEndTime">
<label>End Time:</label>
@Html.DropDownListFor(m => m.SelectedEndDay, Model.DaysOfTheWeek, new { @class = "dayOfTheWeekSelector", @id = "SelectedEndDay" })
@Html.EditorFor(m => m.EndTime, new { htmlAttributes = new { @class = "timeEntryBox", @id = "EndTimeEntryBox", @readonly = "readonly" } })
</li>
<li id="TimeEntryDuration" class="hidden">
<label>Duration:</label>
@Html.DropDownListFor(m => m.SelectedStartDay, Model.DaysOfTheWeek, new { @class = "dayOfTheWeekSelector", @id = "SelectedDurationStartDay", @Name = "SelectedDurationStartDay" })
H:@Html.DropDownListFor(m => m.SelectedDurationHour, Model.DurationHours, new { @class = "durationTime", @id = "DurationHour" })
M:@Html.DropDownListFor(m => m.SelectedDurationMinute, Model.DurationMinutes, new { @class = "durationTime", @id = "DurationMinute" })
</li>
You have to specify one of the radio's you want to trigger the change : 您必须指定要触发更改的无线电之一:
$("input[name=TimespanEntryMode]:eq(index_here)").trigger("change");
____________________________________^^^^^^^^^^
Hope this helps. 希望这可以帮助。
$("#toggle").on('click', function(){ $("input[name=TimespanEntryMode]:eq(0)").trigger("change"); }); $("input[name=TimespanEntryMode]").change(function (){ alert('toggle'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <label>Time Entry Mode:</label> <label class="normal"> <input type="radio" id="TimeEntryModeTime" name="TimespanEntryMode" value="true" checked="checked" />Time </label> <label class="normal"> <input type="radio" id="TimeEntryModeDuration" name="TimespanEntryMode" value="false" />Duration </label> </li> <button id='toggle'>Toggle</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.