JavaScript改变事件不触发时使用.trigger()

JavaScript change event not triggering when using .trigger()

本文关键字：trigger 改变 事件 JavaScript      更新时间：2023-09-26

我已经编写了一个JavaScript .change()事件，所以当一个单选按钮选择被改变时，不同的事情发生了，当我手动更改事件时，一切都很好。不工作的是，当我在单选按钮上调用.trigger("change")命令时，事件似乎没有发射，因为.change()调用中的代码都没有运行。通过JavaScript代码触发事件的正确方法是什么?

下面是我用来调用事件的代码: 
$("input[name=TimespanEntryMode]").trigger("change");

下面是应该在更改事件中运行的代码:

$("input[name=TimespanEntryMode]").change(function ()
{
    $("#TimeEntryStartTime").toggleClass("hidden");
    $("#TimeEntryEndTime").toggleClass("hidden");
    $("#TimeEntryDuration").toggleClass("hidden");
    $(".timeEntryBox").val("");
});

按要求的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>

您必须指定想要触发更改的单选项之一:

$("input[name=TimespanEntryMode]:eq(index_here)").trigger("change");
____________________________________^^^^^^^^^^

希望对你有帮助。

$("#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>

相关文章：