改变与选择TD值，而不是传播事件

我有一个的jsfiddle与一个选择具有2个值替换TD值：http://jsfiddle.net/B47km/改变与选择TD值，而不是传播事件

当我点击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); 
    }); 
});

来源

2014-02-07 Javier Núñez

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

来源

2014-02-07 11:24:59

为您解决它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); 
     } 
    }); 
});

来源

2014-02-07 11:27:34 slash197

有可能是一个更好的方法（我有点jQuery的生锈），但

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

要看到，如果单击事件从td来到或select似乎解决了plnkr。

来源

2014-02-07 11:28:13 ivarni

尽管你没有明确地说过，我猜你试图实现一个点击来改变，选择一个新的值，然后把它放回去（删除选择）。在这种情况下：

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

来源

2014-02-07 12:15:17 PeteAUK

改变与选择TD值，而不是传播事件

回答

相关问题