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

时间:2014-02-07 11:23:16

标签: javascript jquery html css

我有一个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);
    });
});

4 个答案:

答案 0 :(得分:0)

使用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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

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