CODEWITHSUNDEEP
jquery
Linacel
Linacel

Reputation: 21

.trigger("change") not working in .on("change")

I used .on("change") event function because there's a part in my whole code that changes dynamically. .trigger("change") works fine in .change() but not on .on("change"). Here is my code:

    $('#popupContent').on('change', '#gradeYearLevel', function() {
        var $course = $('#course');
        var $section = $('#section');

        if ($(this).val() > 4) {
            $type = 0;
        }
        else {
            $type = 1;
        }
        if ($('#gradeYearLevel').val() == '') {
            $course.empty().append($("<option>", {"value": ""}).html("-- Select --"));
            $section.empty().append($("<option>", {"value": ""}).html("-- Select --"));
        }
        else {
            $.getJSON(BASE_PATH + "getJSONCoursesByType/" + $type, function(data) {
                $course.empty().append($("<option>", {"value": ""}).html("-- Select --"));
                $.each(data, function(k,v){
                    $course.append(
                        $("<option>", {"value": v.id}).html(v.title)
                    );
                });
            });
            $.getJSON(BASE_PATH + "getJSONSectionsByType/" + $type, function(data) {
                $section.empty().append($("<option>", {"value": ""}).html("-- Select --"));
                $.each(data, function(k,v){
                    $section.append(
                        $("<option>", {"value": v.id}).html(v.name)
                    );
                });
            });
        }
    }).trigger("change");

Upvotes: 2

Views: 2718

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because you're triggering the change event on the #popupContent element as returned from on(), not the #gradeYearLevel which the delegated event handler is listening for.

You need to call trigger() on the child element so that the event can bubble. Try this:

$('#popupContent').on('change', '#gradeYearLevel', function() {
    // your code here...
})

$('#gradeYearLevel').trigger("change");

Upvotes: 1

Related Questions