jQuery下拉选择渲染

Question

不确定您是否会得到我想要的东西，因为 Fiddle 不能（或者我不知道如何）模仿网络应用程序的行为。我在表格中有一个下拉 HTML 表单。当我使用 AJAX 发送选择时，PHP 返回食物的名称（对于 1. 它应该返回 tuna，对于 2. 它应该返回 ham 等...）。我希望立即显示名称，但是....

$('td.editable').click(function () {
//$(this).off("click");
 var form = '<select id="choice" onChange="doSomething(this.value)">\
                        <option disabled selected></option>\
                        <option value="1">1</option>\
                        <option value="2">2</option>\
                        <option value="3">3</option>\
                    </select>';

 $(this).html(form);
 });

1. 当我注释掉JS的第二行时，下拉菜单一直隐藏，如果你想做出选择你必须一直按住LMB。但是，当响应来自 AJAX 时，它被插入到单元格中，如果您认为这不是您的正确选择，您可以改变主意。这是我想要的最后一件事。

2. 当我离开 JS 的第二行时，下拉菜单正常运行，AJAX 从 PHP 获取食物名称，并将其写入单元格中。问题是下拉菜单变得功能失调。 <td> 单元格不再对点击做出反应，如果您决定改变主意，则必须重新加载页面以使其再次可点击。如何解决这个糟糕的用户界面？

这里是PHP调用方案，仅供参考...

function doSomething(val){

    $.ajax({
        type: "POST",
        url: "choice.php",
        data: { choice: val },
        dataType: "text",
        success: function (response) {
            $("td.editable").html(response);
        }
    });
}

还有小提琴：https://jsfiddle.net/y64k2Lor/

Answer 1

不必打开和关闭点击事件处理程序，您可以在注册处理程序时使用event delegation，而是添加和删除“可编辑”类。通过事件委托，您可以在表格元素上注册处理程序，但只有在单击具有“可编辑”类的单元格时才会调用回调。

您可以在显示下拉列表时删除“可编辑”类，然后在 ajax 调用返回时重新添加它。

$('table').on('click', 'td.editable', function () {
    var $cell = $(this);
    var $select = $('<select>'
                   + '<option disabled selected></option>'
                   + '<option value="1">1</option>'
                   + '<option value="2">2</option>'
                   + '<option value="3">3</option>'
                   + '</select>');

    $cell.html($select).removeClass('editable');

    $select.change(function() {
        // Make ajax call here and re-add "editable" when it returns.
        $.ajax({
            type: "POST",
            url: "choice.php",
            data: { choice: $(this).val() },
            dataType: "text",
            success: function (response) {
                $cell.html(response).addClass('editable');
            }
        });
    });
});

jsfiddle