Question

我在组合框上触发多个值的更改事件但不幸的是事件正在丢失。有没有办法在触发下一个事件之前等待一个事件完成。示例代码如下所示

        for (i = 0; i < 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);                        
                }
            }
        }

触发事件时，会向DOM添加一个新的选择框，但不会添加所有选择框。

此外，更改事件处理程序如下所示

$('#context_filter').change(function(event, selectValues)
{
    if ($(this).prop("selectedIndex") > 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 += "&validate=" + validate;
        $('#ajaxBusy').show();
        $.getJSON('GetContextFilterData', formInput, function(data)
        {
            var selectBox = '<tr><td class="celltoppad"><b>' + selectedVal +
                    ' : </b></td> <td class="celltoppad"><select multiple="multiple" name="' +
                    selectedVal.toLowerCase() + '" id="' + selectedVal.toLowerCase() + '" >';
            var errorMsg = '';
            var errorCount = 1;
            errorMsg += '<html>';
            $.each(data.errorMessageList, function(index, value)
            {
                errorMsg += errorCount + ') ' + value + '</br></br>';
                errorCount++;
            });
            errorMsg += '</html>';

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

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

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

            $('#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();
        });
    }
});

Answer 1

而不是触发事件，你不能只调用处理程序吗？

var handler = function(event, selectValues)
{
    if ($('#context_filter').prop("selectedIndex") > 0)
    {
        populateDateValues();
        var contextFilterComboObject = $('#context_filter');
        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 += "&validate=" + validate;
    $('#ajaxBusy').show();
    $.getJSON('GetContextFilterData', formInput, function(data)
    {
        var selectBox = '<tr><td class="celltoppad"><b>' + selectedVal +
                ' : </b></td> <td class="celltoppad"><select multiple="multiple" name="' +
                selectedVal.toLowerCase() + '" id="' + selectedVal.toLowerCase() + '" >';
        var errorMsg = '';
        var errorCount = 1;
        errorMsg += '<html>';
        $.each(data.errorMessageList, function(index, value)
        {
            errorMsg += errorCount + ') ' + value + '</br></br>';
            errorCount++;
        });
        errorMsg += '</html>';

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

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

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

        $('#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();
    });
}
});

    for (i = 0; i < 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);
        handler(null, cfVal);                       
            }
        }
    }

我从未测试过上面的代码，但是我将处理程序声明为函数，然后在底部的循环中，您可以看到我如何调用它而不是触发它（handler（cfVal））

Answer 2

我能够找到问题的解决方案，当单击后退按钮并触发更改事件时，我使用异步作为false进行了ajax调用，这解决了问题。这是因为如果异步是真的，json调用会同时发生，并且在此期间会丢失一些事件。

由于

在循环中触发更改事件会导致丢失事件

2 个答案: