沒有訪問數據屬性

我在表中有一些行，我想只有一個表單，而不是每個人都有一個表單。每一行都可以編輯或刪除。我試圖使用數據屬性共享使用它來做一個通用的行動。沒有訪問數據屬性

HTML

<div id="deleteConfirm" title="Delete user?" style="display:none"> 
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>..Are you sure?</p> 
</div> 

<button type="button" id="deleteButton1" data-userName="test1" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-minus"></span> 
</button> 
<button type="button" id="deleteButton2" data-userName="test2" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-minus"></span> 
</button>

$("[id^=deleteButton]").button({ 
icons: { 
    primary: "ui-icon-minus" 
}, 
text: false 
}); 

$("[id^=deleteButton]").click(function() { 
//var userName = $("[id^=deleteButton]").data('data-reportname'); 
var userName = $(this).data('userName'); 
alert(userName); 
$("#deleteConfirm").data('userName', userName).dialog("open") 
    // $("#deleteConfirm").dialog("open"); 
}); 

$("#deleteConfirm").dialog({ 
autoOpen: false, 
resizable: false, 
width: 400, 
height: 180, 
modal: true, 
buttons: { 
    "Delete user": function() { 
    alert($(this).data('userName')); 
    $(this).dialog("close"); 
    }, 
    Cancel: function() { 
    $(this).dialog("close"); 
    } 
} 
});

我無法讀取數據屬性。

我創建了一個基本的測試 http://jsfiddle.net/q5fLz/1/

來源

2013-10-25 robert trudel

的data屬性必須全部小寫：

<button type="button" id="deleteButton1" data-username="test1" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-minus"></span> 
</button> 
<button type="button" id="deleteButton2" data-username="test2" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-minus"></span> 
</button>

$("[id^=deleteButton]").click(function() { 
    var userName = $(this).data('username'); 
    alert(userName); 
    $("#deleteConfirm").data('username', userName).dialog("open") 
});

Example fiddle

注意，因爲jQuery將所有的數據屬性引入到對象，它轉換屬性帶連字符的名字以駱駝爲例。例如。可以使用$.data('user-name')或$.data('userName')訪問user-name。您在HTML屬性中使用camelcase時會混淆jQuery，認爲該屬性爲data-user-name。

來源

2013-10-25 17:42:50

對於那些好奇的人，像我這樣的，誰是想知道在規範它所有'data-*'屬性都必須全部小寫，[這是一個鏈接]（http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non - 可見光數據與 - 的數據 - * - 屬性）。 – ajp15243

數據屬性應被定義爲劃線分隔（user-name），你在jQuery的閱讀爲駝峯標準化（userName）。從source（感謝@ ajp15243）

報價：

元素 .dataset返回元素的 data-*屬性的DOMStringMap對象。

連字名稱變成駱駝狀。例如，data-foo-bar="" 變成element.dataset.fooBar。

<div id="deleteConfirm" title="Delete user?" style="display:none"> 
     <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>..Are you sure?</p> 
    </div> 

<button type="button" id="deleteButton1" data-user-name="test1" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-minus"></span> 
</button> 
<button type="button" id="deleteButton2" data-user-name="test2" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-minus"></span> 
</button>

的jsfiddle：

那麼，這種變化DOM應該與你的jQuery代碼工作http://jsfiddle.net/Ap2ZH/

來源

2013-10-25 17:46:53 Saran

沒有訪問數據屬性

回答

相關問題