1

我在表格中有一些行，我希望所有网页只有一个表单，而不是每个网页都有一个。每一行都可以编辑或删除。我尝试使用数据属性进行共享，使用它来执行通用操作。

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>

js

$("[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/

4

2 回答 2

4

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")
});

示例小提琴

请注意，因为 jQuery 将所有数据属性放入一个对象中，它会将带有连字符的属性名称转换为驼峰式大小写。例如。user-name可以使用$.data('user-name')或访问$.data('userName')。您在 HTML 属性中使用 camelcase 使 jQuery 误以为该属性是data-user-name.

于 2013-10-25T17:42:50.737 回答
2

数据属性应定义为破折号分隔( user-name)，并且您在 jQuery 中将它们读取为骆驼大小写规范化( userName)。

引用来源（感谢@ajp15243）：

element .dataset 返回DOMStringMap元素 data-*属性的对象。

连字符的名称变成驼峰式。例如，data-foo-bar="" 变成element.dataset.fooBar。

因此，对 DOM 的这种更改应该适用于您的 jQuery 代码：

<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：http: //jsfiddle.net/Ap2ZH/

于 2013-10-25T17:46:53.210 回答