使用.trigger（）

Question

我编写了一个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>

Answer 1

您必须指定要触发更改的其中一个广播：

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

希望这有帮助。

＆＃13;

＆＃13;

$("#toggle").on('click', function(){
  $("input[name=TimespanEntryMode]:eq(0)").trigger("change");
});

$("input[name=TimespanEntryMode]").change(function (){
  alert('toggle');
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;