Question

我有一个jsfiddle用一个带有2个值的select替换td值：http://jsfiddle.net/B47km/

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

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

使用jQuery one()方法，该方法只会监听一次事件

$(function () {
    $(".test").one('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);
    });
});

Fiddle Demo

Answer 2

为您修复了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);
        }
    });
});

Answer 3

可能有更好的方法（我在JQuery上有点生疏）但是

    if (!$(e.target).hasClass('test')) {
        return
    }

要查看点击事件是来自td还是select似乎修复了plnkr。

Answer 4

虽然你没有明确说过，但我猜你正在尝试实现点击更改，选择一个新值，然后将其重新放入（删除选择）。在这种情况下：

$(function () {
    $('.test').click(function (e) {
        var td = $(this);

        var select = $(document.createElement('select')).attr('name', 'select_name').attr('class', 'select-dorsal form-control'),
            curVal = parseInt(td.get('text'));
        for(var i = 0; i <= 5; i++) {
            select.append('<option value="' + i + '"' + (curVal == i ? ' selected="selected"' : '') + '>' + i + '</option>');
        }            

        td.html(select);
        select.on('click', function(e) { e.stopPropagation(); });

        select.on('change', function(e) {
            var newVal = parseInt(this.options[this.selectedIndex].value);
            td.html(newVal);
        });
    });
});

http://jsfiddle.net/B47km/10/

使用select而不是传播事件更改td值

4 个答案: