點擊一個表格單元格重新運行了jQuery

我有這樣的jsfiddle：http://jsfiddle.net/4wyDA/1/點擊一個表格單元格重新運行了jQuery

我有它的設置，當你點擊一個表格單元格它增加了一個文本框，但我有問題，就是你無法編輯文本框中的文本，一旦你點擊表格單元格我已經嘗試e.stopPropagation()但這不起作用。

這是應該發生的事情：1）有人點擊表格單元格，所有其他具有輸入/文本區域的單元格應該刪除輸入/文本區域並將文本放回單元格（工作）中，2）單擊的單元格應該填充來自單元格（工作）的文本的輸入/文本區域。最後，用戶應該能夠點擊按鈕並編輯輸入/文本區域中的文本（不起作用，它繼續運行步驟1和2）。

$(".editable").click(function(e) { 
    $(".editable").each(function() { 
     if ($(this).has("input")) { 
      var v = $(this).children("input.input, textarea").val(); 
      $(this).text(v); 
     } 
    }); 

    var type = $(this).attr("data-type"); 

    var val = $(this).text(); 
    if (type === "text" || type === "date") { 
     str = '<input type="text" class="input" style="width: 100%;" value="' + val + '" /><br />'; 
    } 
    str += '<input type="button" value="Save" />'; 
    str += '<input type="button" value="Cancel" />'; 

    $(this).html(str); 
}); 

$(document).on("click", ".editable input", function(e){ 
    e.stopPropagation(); 
});

來源

2013-06-27 Get Off My Lawn

'e.stopPropagation（）;'什麼也不做，當該事件已經冒泡到文檔中。 –

爲了確保我的理解，您的問題是保存和取消按鈕不起作用，對嗎？ – Derek

@BradM所以，我能做些什麼？ –

而是取出單獨click事件輸入和檢查在.editable click事件本身的目標元素..

$(".editable").click(function (e) { 
     if (!$(e.target).is('input')) { 
      // your code when 
     } 
     else { 

      // something else 
     } 
});

來源

2013-06-27 17:37:58

不錯的工作，+1 – tymeJV

其實這個工程:) +1 http://jsfiddle.net/hungerpain/4wyDA/4/ – krishgopinath

我不知道爲什麼downvote這個答案... +1 – PSL

您可以刪除輸入停止與.editable類元素，通過添加以下代碼到你的活動開始：

$(".editable").click(function(e) { 
    if (e.target.className === 'input') 
     return; 
    //rest of code

DEMO

來源

2013-06-27 17:41:41

爲什麼我被拒絕了？ –

建議：你可以改變你的點擊事件雙擊？這將解決您的問題。我的意思是這樣的：

相反的：

$(".editable").click(function(e) {

用途：

$(".editable").dblclick(function(e) {

總是當我看到可編輯的表，他們使用雙擊。

Your demo changed

來源

2013-06-27 18:09:27

點擊一個表格單元格重新運行了jQuery

回答

相關問題