jQuery：如何在jQuery中編輯附加輸入值？

我在左邊有一些輸入值（我們稱之爲輸入面板）。當點擊Add按鈕，這些輸入值附加到側邊欄上的一個div的權利稱爲BLUEBOXjQuery：如何在jQuery中編輯附加輸入值？

這裏是從上方的jsfiddle：jsfiddle

現在，我希望用戶能夠點擊其中一個div並編輯附加的輸入值並保留更改。我喜歡投入到以「保存/保留的更改按鈕」

我想到了一些方法來做到這一點再次但是比出現在輸入面板，但我是初學者所以可能是極其錯誤的）：

例1

作爲我的目標解決方案，您有什麼建議？爲什麼我的示例工作或失敗？

非常感謝您提前！

2012-06-19 Opoe

HTML5 contenteditor http://html5demos.com/contenteditable –

如果你不希望使用HTML5'contenteditable'，你必須綁定函數添加到單擊事件中，它用表單替換現有元素以編輯它們，並具有保存按鈕，用於保存和替換帶有不可編輯元素的表單。 – sachleen

你正在前進的方向是可控的，但備份一步，並牢牢掌握未來要素使用授權方法。當前代碼在'addbutton' clcik中調用'live（）'。這將繼續爲已添加的元素添加處理程序。添加5個元素，第一個元素點擊時將觸發5次點擊處理程序。也有可編輯的插件，可以讓你更容易 – charlietfl

-1

如果加載它按鈕不是數據發佈到服務器，你可以在.bluebox，最後用使用內聯編輯器保存，它按鈕，你可以在#sidebar發佈的數據服務器。

2012-06-19 20:30:11

一對夫婦的總體思路 - 你可以像這樣的數據添加到BLUEBOX DIV：

$('<div>').addClass('bluebox').data({ field1: field1.val(), /* field 2 etc.. */ });

然後檢索像值：

$('.bluebox').click(function() { 
    field1.val($(this).data('field1')); 
    // field 2 etc.. 
});

或者你可以內創建跨度的結構在BLUEBOX：

bluebox = $('<div>').addClass('bluebox'); 
bluebox.append($('<span>').attr('data-name', 'field1').text(field1.val())); 
// field 2 etc..

然後檢索像值：

$('.bluebox').click(function() { 
    field1.val($(this).find('span[data-name=field1]').text()); 
    // field 2 etc.. 
});

由於這變得越來越複雜，您可能希望在不同類型的字段的情況下使用字段名稱的循環。

2012-06-19 20:30:33 Julian

謝謝你的解釋和想法，我會給它一切去看看我是否明白了一切:)繼續.. – Opoe

我建議您添加一個保存按鈕，一個隱藏的blueboxid div，用於跟蹤哪個bluebox被點擊，以及一個稍微更加模塊化的設計，以便您可以更輕鬆地解決更改（並且使事情更容易閱讀）。

我有一個完整的jsfiddle在這裏爲你http://jsfiddle.net/s6Yxz/26/ :)

2012-06-19 20:52:37

不錯。我可能仍然使用數據屬性而不是類，但無論如何。+1 – Julian

@Rey Gonzales：感謝您的解釋和解決方案。我會爲自己嘗試一些東西，看看我是否理解了所有事情，然後再回來看看！ – Opoe

回答