與jQuery文本框內聯編輯看起來像只讀？

我想用jQuery做一些內聯編輯。我遇到的問題是當我創建輸入文本時，我無法更改文本。我似乎甚至無法得到重點。它看起來像只讀或禁用。 $（「.sr-label」）.live（「click」）仍然在我嘗試點擊文本字段時被調用，我是否需要做某種解除綁定或者其他操作？與jQuery文本框內聯編輯看起來像只讀？

感謝您的任何幫助

<ul> 
    <li><span class='sr-label'>label 1</span></li> 
    <li><span class='sr-label'>label 2</span></li> 
</ul>

我的js看起來跨度內的元素，如

$(".sr-label").live("click", function(event){  
    console.log("sr-label"); 
    var $item = $(this), 
    $target = $(event.target); 
    var $pitem = $item.parent(); 
    newHTML = '<input id="label_'+$pitem.attr('id')+'" type="text" size="30" '+ 
       ' value="'+$item.text()+'"><input class="saveedit" '+ 
       ' id="save_'+$pitem.attr('id')+'" type="button" value="save">'+ 
       ' <input id="canedit" type="button" value="cancel">'; 
    $item.html(newHTML); 
    return false; 
});

jsFiddle Example

來源

2012-11-07 randy

真是一團糟。停止使用'live'' use'on'，爲什麼不創建文本框並在需要時隱藏它？ – gdoron

創建一個演示，複製jsfiddle.net中的問題 – charlietfl

Click事件傳播到跨度，使你的處理程序再次運行。而你的手每次運行時，ler都會替換整個內容。所以這不是說輸入是隻讀或禁用的，而是點擊它將刪除並重新創建它。

你會發現，如果標籤與鍵盤輸入然後你可以在其中鍵入自按鍵不會觸發你的點擊處理程序。

「我需要做某種解綁或什麼？

那麼你真的不能在停止將其應用到與該類而不是別人的某些元素的方式解除綁定.live()。如果您將個人處理程序綁定在.click(),.bind()或未授權的表格.on()那麼您可以逐個解除綁定。

你可以做什麼，而不是是改變你的選擇，使其只適用於沒有任何子輸入元素的元素：

$(".sr-label:not(:has(input))").live("click", function(event){

演示：http://jsfiddle.net/H2ncm/2/

然而，你應該注意該.live()被棄用，因此，（除非你堅持某種原因真的老版本的jQuery的），你應該切換到.on() method代表團版本：

$(document).on("click", ".sr-label:not(:has(input))", function(event){

當單擊document時，jQuery會測試它是否在與第二個參數中的選擇器相匹配的元素上，如果是，則調用您的函數（否則不執行任何操作）。請注意，理想情況下，您不會使用document，那麼您將使用更接近相關元素的元素，例如，您的元素包含ul元素。

演示：http://jsfiddle.net/H2ncm/1/

這有點相當於增加了處理器中一個簡單的測試做什麼，如果點擊的範圍已經包含輸入：

if ($item.find("input").length) 
    return;

演示：http://jsfiddle.net/H2ncm/

來源

2012-11-07 03:46:41 nnnnnn

謝謝。我之前使用.live的原因是爲之後創建的元素。我用.on替換了.live，但是現在，當我在飛行中創建一個元素時，事件不會觸發新項目。我想更多的研究和問題屬於一個新的問題 – randy

我爲'.on（）'展示的語法對於動態創建的元素可以很好地工作，它是'.live（）'的更新的等價物。請注意，動態元素的選擇符在'.on（）'的第二個參數中，而不是在您調用該方法的jQuery對象中。 – nnnnnn

My Fiddle這應該完成工作。

$handler = function(e) { 
    $.tempNamespace = { oldText : $(this).text() } 
    $item = $(this); 
    $parent = $item.parent(); 
    $('.sr-label').unbind('click'); 
    $newHTML = "<input id='textEdit' type='text' value='" + $item.text() + "'><button id='saveEdit'>Save</button><button id='cancelEdit'>Cancel</button>"; 
    $item.html($newHTML); 
}; 

$('.sr-label').click($handler); 


$('li').on('click','#saveEdit',function(){ 
    $newText = $(this).prev().val(); 
    $(this).parent().html($newText);  
    $('.sr-label').click($handler); 
}); 

$('li').on('click','#cancelEdit',function(){ 
    console.log(); 
    $(this).parent().html("<span class='sr-label'>" + $.tempNamespace.oldText + "</span>");  
    $('.sr-label').click($handler); 
});

來源

2012-11-07 04:21:05 pmandell

與jQuery文本框內聯編輯看起來像只讀？

回答

相關問題