更改元素p與輸入文本字段問題jquery

Question

我面臨一個小問題，同時發射jquery事件來替換元素p或span文本字段和onblur事件替換回p或span字段。

演示是在這裏http://jsfiddle.net/yXcZG/

它非常適合第一次，而頁上的文字點擊，但是當你重複同樣的過程第二次失敗。

任何一個可以幫助我在哪裏應該是問題

Answer 1

jQueries .on selecor用於連接到動態內容，如Ajax和你正在做什麼。通常情況下，您只會使用$('.myClass').click(funcction(){});，但使用像您這樣做的靜態類$('.cmtedit').on(...有問題，因爲一旦您單擊該類並將其刪除，它就不再與您創建的參考一同存在。因此，要正確使用.on，您需要將其附加到document，以便它始終可以附加到任何動態內容！ :-)

。對（事件[，選擇器] [，數據]，處理程序（eventObject）傳遞）

$(document).on('click', '.cmtedit', function (e) { 
    console.log(this); 
    TBox(this); 
}); 

行之有效這裏..

http://jsfiddle.net/yXcZG/3/

如果您不是使用Chrome或Firefox，請記得刪除console.log();。它完全不支持IE！

Answer 2

我覺得你是在RBox功能在TBox功能做

$(obj).remove(); 

，以便消除obj的，當你創建它，你必須添加點擊事件處理程序

或甚至更好

我建議你使用

$(".cmtedit").live('click', function (e) { 

，而不是

$(".cmtedit").on('click', function (e) { 

參考http://api.jquery.com/live/

Answer 3

您未將單擊事件附加到在RBox（）函數中創建的新的<p>。下面的代碼工作：（測試是否出在這裏：http://jsfiddle.net/yXcZG/5/）

$(".cmtedit").on('click', function (e) { 
    TBox(this); 
}); 

$("input").live('blur', function (e) { 
    RBox(this); 
}); 
function TBox(obj) { 
     var id = $(obj).attr("id"); 

     var tid = id.replace("cmt_edit_", "cmt_tedit_"); 
     var input = $('<input />', { 'type': 'text', 'name': 'n' + tid, 'id': tid, 'class': 'text_box', 'value': $(obj).html() }); 
     $(obj).parent().append(input); 
     $(obj).remove(); 
     input.focus(); 
} 
function RBox(obj) { 
    var id = $(obj).attr("id"); 

    var tid = id.replace("cmt_tedit_", "cmt_edit_"); 
    var input = $('<p />', { 'id': tid, 'class': 'cmtedit', 'html': $(obj).val() }); 
    $(obj).parent().append(input); 
    $(obj).remove(); 

    $(".cmtedit").on('click', function (e) { 
    TBox(this); 
    }); 
}​ 

Answer 4

如果我是你，雖然我會重構它（活是昂貴的），並把它寫這樣的：

<style> 
    ​#cmt_edit_323 input { display: none; }​ 
</style> 

<div id="sample"> 
    <p id="cmt_edit_323" class="cmtedit"><span>Sample Text</span><input type="text"></input> </p> 
</div>​​​​​ 

<script> 
$(".cmtedit").on('click', function (e) { 
    TBox(this); 
}); 

$(".cmtedit input").on('blur', function (e) { 
    RBox(this); 
}); 

function TBox(obj) { 
     var input = $(obj).find("input"); 
     var span = $(obj).find("span"); 
     input.attr('value', span.text()).show().focus(); 
     span.hide();    

} 
function RBox(obj) { 
     var input = $(obj); 
     var span = $(obj).parent().find("span"); 
     span.html(input.attr('value')).show(); 
     input.hide(); 
}​ 
</script> 

檢查在這裏：JSFiddle

Answer 5

我無法發表評論，所以我不得不作出回答。

@ ppumkin的答案只是一個小問題 - 如果您單擊瀏覽器或切換選項卡，父項中添加了兩個元素。

我試圖檢查許多其他事件來解決這個問題，但沒有運氣。 所以對我來說，最簡單的方法是做一個簡單的檢查元素之前追加在RBox()功能：

if ($("#" + tid).length == 0) { 
    $(obj).parent().append(input); 
} 

除了這個我用.on()方法爲blur爲.live()已被棄用，不再推薦。