Triggering change events in a loop results in loss events
<p>I am triggering a change event on a combo box for multiple values but unfortunately events are getting lost. Is there a way to wait for one event to complete before triggering the next event. Sample code is shown below</p>

<pre><code>        for (i = 0; i &lt; contextFilters.length; i++)
        {
            var contextFilter = contextFilters[i];
            if (contextFilter != "")
            {
                var cfData = contextFilter.split(":");
                var cfName  = cfData[0];
                var cfVal = cfData[1];
                if (cfName != null)
                {
                    //alert("cfName : " + cfName);
                    //alert("cfVal : " + cfVal);
                    $('#context_filter').val(cfName);
                    $('#context_filter').trigger('change', cfVal);                        
                }
            }
        }
</code></pre>

<p>When the event is triggered a new select box is added to the DOM but not all select boxes are getting added.</p>

<p>Also the change event handler is a s shown below</p>

<pre><code>$('#context_filter').change(function(event, selectValues)
{
    if ($(this).prop("selectedIndex") &gt; 0)
    {
        populateDateValues();
        var contextFilterComboObject = $(this);
        var selectedVal = $(contextFilterComboObject).val();
        var validate = $('#collapsiblePanel :input').attr('disabled') == null;
        if (!validate)
        {
            $('table[id*=OtherOptions] :input').attr('disabled', false);
            $('#collapsiblePanel :input').attr('disabled', false);
        }
        var formInput = decodeURIComponent($('#rptInputParams').serialize());
        formInput += "&amp;validate=" + validate;
        $('#ajaxBusy').show();
        $.getJSON('GetContextFilterData', formInput, function(data)
        {
            var selectBox = '&lt;tr&gt;&lt;td class="celltoppad"&gt;&lt;b&gt;' + selectedVal +
                    ' : &lt;/b&gt;&lt;/td&gt; &lt;td class="celltoppad"&gt;&lt;select multiple="multiple" name="' +
                    selectedVal.toLowerCase() + '" id="' + selectedVal.toLowerCase() + '" &gt;';
            var errorMsg = '';
            var errorCount = 1;
            errorMsg += '&lt;html&gt;';
            $.each(data.errorMessageList, function(index, value)
            {
                errorMsg += errorCount + ') ' + value + '&lt;/br&gt;&lt;/br&gt;';
                errorCount++;
            });
            errorMsg += '&lt;/html&gt;';

            if (errorCount &gt; 1)
            {
                $('#ajaxBusy').hide();
                showErrorDialog(errorMsg, errorCount * 20);
                $(contextFilterComboObject).prop("selectedIndex", '0');
                return;
            }

            $.each(data.contextFilterDataList, function(index, value)
            {
                selectBox += '&lt;option value="' + value + '"&gt;' + value + "&lt;/option&gt;";
            });

            selectBox +=
                    '&lt;/select&gt;&lt;/td&gt;&lt;td class="celltoppad"&gt;&lt;a href="#"&gt;&lt;img id="removeCF" ' +
                            'src="../images/remove.png"/&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;';

            $('#ajaxBusy').hide();
            // If the context filter has not been already added.
            if ($('#' + selectedVal.toLowerCase()).length == 0)
            {
                $('a[id*=_showDialog]').hide();
                toggleDatePickerLink();
                $('img#removeDate').hide();
                $('table[id*=OtherOptions] :input').attr('disabled', true);
                $('#collapsiblePanel :input').attr('disabled', true);
                $('table#context_filter').append(selectBox);                    
                $(contextFilterComboObject).prop("selectedIndex", '0');
            }

            if (selectValues != null)
            {
                $('#' + selectedVal.toLowerCase()).val(selectValues.split(","));
            }

            $('#' + selectedVal.toLowerCase()).multiselect({
                noneSelectedText: 'Please select',
                selectedList: 3,
                selectedText: '# of # selected',
                position: {
                    my: 'left center',
                    at: 'right center',
                    offset: '20 100'
                }
            }).multiselectfilter();
        });
    }
});
</code></pre>
