X-editable就地編輯插件如何存儲值？

我想了解X-editable如何存儲值。X-editable就地編輯插件如何存儲值？

例如，我有以下代碼：

HTML：

<a class="editable" data-type="select" data-value="1">value-1</a>

的JavaScript：

$.fn.editable.defaults.mode = 'inline'; 

$('.editable').html('value-2'); 
$('.editable').data('value',2); 

$('.editable').editable({ 
    source: function() { 
     return [ 
      { value: 1, text: "value-1" }, 
      { value: 2, text: "value-2" }, 
      { value: 3, text: "value-3" } 
     ]; 
    } 
});

這裏是jsfiddle to play with

正如你所看到的，它工作得很好。在第一步中，我聲明下拉的值等於「值-1」，然後在JavaScript中將其更改爲「值-2」。因此，您可以在頁面上顯示「值-2」，在點擊下拉相同的值後，可以選擇「值-2」。

在這一步，我將修改JavaScript中的位，如下：
```
//$('.editable').html('value-2'); 
$('.editable').data('value',2); 
```
同樣的結果是相當可預期的。您將在頁面上看到「值-1」，但在打開下拉菜單時將選擇「值-2」。
現在讓我們改變JavaScript代碼以相反的方式
```
$('.editable').html('value-2'); 
//$('.editable').data('value',2); 
```
這樣的修改後的頁面上的值將等於「值-2」，但在下拉選擇的值開始編輯時將成爲「價值1」。所以也是非常合理的行爲。

問：

預計不會對我來說什麼是是，節省通過點擊編輯控制的「確定」按鈕不會改變data-value屬性的變化，它只能改變顯示的文本。例如，如果我們將值更新爲"value-3"並單擊「確定」，data-value屬性將仍然等於1.那麼插件在再次打開時如何在下拉列表中選擇適當的值？

UPD：

從更改代碼的編輯價值的最恰當的方法是使用

$('.editable').editable('setValue', 'value-1');

來源

2014-10-01 Sergey Malyutin

HTML的data-*屬性和jQuery的data()方法是不一樣的東西。 jQuery的文件如何處理HTML data-*屬性通過它的data()方法在data()方法頁的HTML5 data-* Attributes小節：

在jQuery 1.4.3 HTML 5個data-屬性將到jQuery的數據對象被自動拉的。

的data-屬性在第一時間中的數據屬性被訪問拉出，然後不再訪問或突變（值然後被存儲在內部的jQuery所有數據）。

這意味着任何HTML data-*屬性最初由jQuery在第一次訪問該屬性時拉動，但在此之後它不再使用。

如果我們重現你的腳步，我們會清楚地看到，儘管值更改爲value-3，在你標記的data-value屬性將保持不變：

<a class="editable" data-type="select" data-value="1">value-3</a>

然而，jQuery的內部data()方法將有存儲值更改。我們可以從拉動'value'財產看到你的元素的data()：

$('.editable').data('value'); 
> 3

如果你想改變data-value屬性，以反映這種變化，我們可以使用jQuery的attr()法修改的財產做自己：

$('.editable').attr('data-value', 3);

我們的標記現在這個樣子：

<a class="editable" data-type="select" data-value="3">value-3</a>

確實注意到的是，如果

<a class="editable" data-type="select" data-value="1">value-1</a>

$('.editable').attr('data-value', 3);

<a class="editable" data-type="select" data-value="3">value-1</a>

$('.editable').data('value'); 
> 1

：您嘗試設置單獨使用 attr()方法的價值，這個改變不會被jQuery的 data()對象爲元素中體現

來源

2014-10-10 10:27:13

X-editable就地編輯插件如何存儲值？

回答

相關問題