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在该元素上不可靠。

Answer 2

关于无限循环

由于其他人已经回答了关于将mouseup更改为change的问题，我将只讨论无限循环问题：

如果您的更改处理程序正在设置下拉列表的值，那么将导致处理程序再次运行。您的处理程序必须足够聪明才能检测到这种情况，可能是通过检测到下拉列表已经处于您期望的状态而不是在此情况下调用设置值

Answer 3

尝试将您的活动更改为onchange()，只有当所选值发生变化时才会触发。

在.mouseup上执行AJAX调用

3 个答案: