CODEWITHSUNDEEP
javascriptjquery
Matthew Verstraete
Matthew Verstraete

Reputation: 6781

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. 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. What is the proper way of firing an event via JavaScript code?

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:

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

Upvotes: 0

Views: 218

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 2

Related Questions