jQuery 下拉选择渲染

Question

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

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

当我注释掉第二行JS的时候，下拉菜单一直隐藏着，如果要选择必须全程按住LMB。但是，当响应来自 AJAX 时，它被插入到单元格中，如果您认为它不适合您，您可以改变主意。这是我想要的最后一件事。
当我离开 JS 的第二行时，下拉菜单正常运行，AJAX 从 PHP 获取食物名称，并将其写在单元格中.问题是下拉菜单变得功能失调。 <td> 单元格不再对点击做出反应，如果您决定改变主意，则必须重新加载页面以使其再次可点击。我怎么解决这个可怜的UI?

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

function doSomething(val){

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

和Fiddle：https://jsfiddle.net/y64k2Lor/

Answer 1

不必打开和关闭 click-event 处理程序，您可以在注册处理程序时使用 event delegation，而是添加和删除 "editable" class .使用事件委托，您可以在 table 元素上注册处理程序，但仅当单击具有 "editable" class 的单元格时才会调用回调。

当显示 drop-down 时，您将删除 "editable" class，然后当 ajax 调用 returns 时 re-add 它.

$('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

jQuery 下拉选择渲染

jQuery dropdown choice rendering

jquery

ajax

forms

overwrite

dropdown