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