Question

我有一个包含数据的表，当我点击某列中的某个单元格时，我希望它更改为一个选择下拉列表，供用户选择该行的类别（将通过以下方式写入数据库： AJAX，但后来才会出现）。我之前使用this的文本框做了类似的事情，效果很好，但我不确定我是否正确修改它。

我创建了JSFiddle，显示了我遇到的问题。我单击文本，它会按预期变成选择元素，但是当我点击它以选择一个选项时，下拉列表不会保持打开状态，我无法选择任何内容。调试告诉我，当我点击下拉菜单时，它再次运行$("td.ChooseType").click()例程，所以我试图通过删除类然后将其添加回选择来抑制它，但是没有解决了它。在极少数情况下，下拉列表保持打开状态，我无法通过鼠标或键盘选择任何内容。不幸的是，所有用户都将使用IE8，因此我需要它与之兼容。

谢谢！

Answer 1

您需要使用event delegation，否则click事件始终绑定到td - 无论其类是否更改。

简单地改变：

$("td.ChooseType").click(function() {

要：

$("table").on('click', '.ChooseType', function () {

JSFiddle demo

Answer 2

纯粹作为已接受答案的替代方法，您可以使用unbind删除附加的处理程序。因此，您可以取消绑定并重新绑定您的处理程序，而不是添加和删除该类。唯一的要求是函数不能内联，但必须单独声明。

示例：http://jsbin.com/qiqunici/1/edit

var handler = function () {
    $(this).unbind('click', handler); //unbind the clicked element only

    //create and change the element

    //inside the select-change event, instead of addClass, re-attach:
    {
       //$(this).parent().addClass("ChooseType").text(selected).find('select').remove();
       $(this).parent().click(handler).text(selected).find('select').remove();
    }
};

$("td.ChooseType").click(handler);

jQuery：生成Select元素

2 个答案: