在.mouseup上执行AJAX调用

Question

当用户从下拉列表中选择一个元素时,我正在尝试执行AJAX调用.一旦.mouseup事件发生,我希望AJAX请求触发并提交数据.

这是我有的:

$('<select />')
    .attr('name', 'status')
    .append('<option>Open</option>', '<option>Full</option>', '<option>Canceled</option>')
    .appendTo(this);

$('select[name=status]').mouseup(function () {
    $.ajax({ 
        url: '/ajax/training-update.php',
        data: {status: $currentSelection},
        type: 'POST',
        success: function(output) {
            alert(output);
            }
    });
});

当我从下拉列表中选择一个项目时,这会创建一个无限循环.我做错了什么？

编辑:

作为@Kolink以下建议,我换.mouseup到.change.这导致了无限循环和"非法调用"错误.

我尝试了下面的测试代码,以确保我.change正确实现:

$('select[name=status]').change(function() {
    alert('Handler for .change() called.');
});

这按预期工作.

有没有理由我不能使用AJAX .change？

编辑#2:添加完整脚本

<script>
    $(function() {
        var $rowStartDate = $("span[id^=rowStartDate]");
        var $rowEndDate = $("span[id^=rowEndDate]");
        var $location = $(".location");
        var $status = $('.status');
        var $ajaxSubmit = $('#ajaxSubmit');

        $($rowStartDate.add($rowEndDate)).click(function() {
            var $currentSelection = $(this);

            // if there is already an input-field in this TD, return...
            if($currentSelection.find('input').length > 0)
                return;

            $currentSelection.html('');

            $currentSelectionClass = $currentSelection.attr('class');

            //create new input-field-object
            if($currentSelectionClass == "rowStartDate"){
                $('<input type="text" />')
                .attr('name', 'editStartDate')
                .addClass('editStartDate')
                .appendTo(this)
                .datepicker();
            }

            if($currentSelectionClass == "rowEndDate"){
                $('<input type="text" />')
                .attr('name', 'editEndDate')
                .addClass('editEndDate')
                .appendTo(this)
                .datepicker();
            }

       });

        $($location).click(function () {
            var $currentSelection = $(this);

            // if there is already an input-field in this TD, return...
            if($currentSelection.find('select').length > 0)
                return;

            $currentSelection.html('');

            $('<select />')
                .attr('name', 'location')
                .append('<option>Location 1</option>', '<option>Location 2</option>', '<option>Location 3</option>')
                .appendTo(this);
        });

        $($status).click(function () {
            var $currentSelection = $(this);

            // if there is already an input-field in this TD, return...
            if($currentSelection.find('select').length > 0)
                return;

            $currentSelection.html('');

            $('<select />')
                .attr('name', 'status')
                .append('<option>Open</option>', '<option>Full</option>', '<option>Canceled</option>')
                .appendTo(this);

        });

        //AJAX call not working correctly
            $('select[name="status"]').change(function () {
                $.ajax({ 
                    url: '/ajax/training-update.php',
                    data: {status: $currentSelection},
                    type: 'POST',
                    success: function(output) {
                        alert(output);
                        }
                });
            });

       //Original AJAX implementation. Moved to above.
       // $($ajaxSubmit).click(function () {
            // $.ajax({ 
                // url: '/ajax/training-update.php',
                // //data: {action: 'test'},
                // type: 'POST',
                // success: function(output) {
                    // alert(output);
                    // }
            // });
       // });

    // $("#ajaxError").ajaxError(function(event, request, settings){
        // $(this).append("Error requesting page " + settings.url);
    // });

    });
</script>

Answer 1

您应该使用该change事件来检测何时使用该事件<select>.mouseup在这个元素上是不可靠的.