改變與選擇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值，而不是傳播事件

回答

相關問題