javascript - 使用选择更改 td 值而不传播事件

Question

我有一个 jsfiddle 将 td 值替换为具有 2 个值的选择:http://jsfiddle.net/B47km/

当我单击 td 时，选择出现，但是当我要查看选项元素时，td 的单击事件抛出并且我无法显示选项。我该如何解决这个问题？

HTML:

<table>
    <td class="test">1</td>
</table>

js代码:

$(function () {
    $(".test").click(function (e) {
        e.stopPropagation();
        var currentEle = $(this);
        var value = $(this).html();
        select = '<select class="select-dorsal form-control" type="text">'
        +'<option name="1" value="1">1</option>'
        +'<option name="2" value="2">2</option>'
        +'</select>';
        $(currentEle).html(select);
    });
});

Answer 1

已为您修复 http://jsfiddle.net/B47km/3/这将只替换一次单元格内容，而不是每次您单击它时。

$(function () {
    $(".test").click(function (e) {
        var currentEle = $(this);
        var value = $(this).html();

        if ($(this).find('select').length === 0)
        {
            select = '<select class="select-dorsal form-control" type="text">'
            +'<option name="1" value="1">1</option>'
            +'<option name="2" value="2">2</option>'
            +'</select>';
            $(currentEle).html(select);
        }
    });
});