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);
 });

当我注释掉JS的第二行时，下拉菜单会一直隐藏，如果你想做出选择，你必须在整个过程中持有LMB。但是，当响应来自AJAX时，它会被插入到单元格中，如果您认为它不适合您，那么您可以改变主意。这是我想要的最后一件事。
当我离开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，而是添加和删除“可编辑”类。使用事件委派，您可以在table元素上注册处理程序，但只有在单击具有“editable”类的单元格时才会调用回调。

当您显示下拉列表时，您将删除“可编辑”类，然后在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

jQuery下拉选项呈现

1 个答案: