1

当用户从下拉列表中选择一个元素时，我正在尝试执行 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>
4

3 回答 3

5

您应该使用该change事件来检测 a 何时<select>被使用。mouseup在那个元素上不可靠。

于 2012-09-06T00:12:46.420 回答
2

关于无限循环

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

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

于 2012-09-06T16:23:09.350 回答
1

尝试将您的事件更改为onchange()仅在所选值更改时触发的方式。

于 2012-09-06T00:13:46.827 回答