Question

在我的MVC项目中，我有这个编辑模板。我无法在IE Developer Tools中调试它，因为它在弹出窗口中。我无法访问其他浏览器。所以我的jquery没有获取url，employeeId和businessUnitId的值。

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.Models.BusinessUnitSelected>" %>

<tr>
    <td><%: Model.BusinessUnit.BusinessUnitName %></td>
    <td>

    <%: Html.CheckBoxFor( 
            x => x.Selected,
            new RouteValueDictionary 
            { 
                { "data-url", Url.Action("AddBusinessUnitForEmployee", "DataService") }, 
                { "data-employeeId", Model.EmployeeId }, 
                { "data-businessUnitId", Model.BusinessUnit.BusinessUnitId } 
            } 

       ) %> 

    </td>
</tr>
<script type="text/javascript">
    $(document).ready(function () {
        $('tr input[type="checkbox"]').click(function () {
            var elementId = $(this).attr('id');
            alert("elementId = " + elementId);
            var url = $(this).val('data-url');
            alert("url = " + url);
            var employeeId = $(this).val('data-employeeId');
            alert("employeeId = " + employeeId);
            var businessUnitId = $(this).val('data-businessUnitId');
            alert("businessunitId = " + businessUnitId);
            var selectedFlag = $(this).is(':checked');
            alert("selectedFlag = " + selectedFlag);

            dataService.saveSelection(
            employeeId,
            businessUnitId,
            selectedFlag,
            elementId,
            SavedSetting,
            url
        );
        });
    }); 
</script>

Answer 1

应该是$(this).data('url')，$(this).data('employeeId')等等。

Answer 2

.val()用于获取/设置value属性，~~应该使用。attr()代替：~~

~~例如。 $(this).attr('data-url');~~

修改

@Dima通过使用data-*建议访问HTML5 .data()属性的正确方法，例如。 $(this).data('url');

注意：您应该在data-属性中使用连字符，否则在使用.data()时无法读取其值。见下文： -

<input type="text" data-employeeId="1" /> console.log($('input[type="text"]').data('employeeId')); // (undefined!)

这是因为$('input[type="text"]').data('employeeId')正在尝试阅读data-employee-id，使用后者，您可以使用.data('employeeId')或.data('employee-id')访问数据。


所有data- *名称都存储在jQuery数据对象中的camelCase中，   使用W3C规则。

因此，data-caMEL-case成为数据对象中的camelCase属性   并且应该使用.data（“camelCase”）访问。因为很多人   将使用.data（“camel-case”），我们将其转换为camelCase as   好吧，但是只有在找不到名为camel-case的数据项时才这样   更快地使用第一个表格。如果使用完整的数据对象   代码如data = jQuery.data（elem），你必须使用data.camelCase来   访问数据项。

Answer 3

尝试使用

$(this).attr('data-employeeId');

Answer 4

在函数的开头缓存$（this）.click以便你的javascript工作得更快。尝试$ this = $（this），然后使用$ this代替$（this）。

$('tr input[type="checkbox"]').click(function () {
  var $this = $(this),
      url = $(this).val('data-url'); // Wrong
      url = $this.attr('data-url'); // Or
      url = $this.data('url');
  ...

});

Answer 5

使用$（this）.attr（key）代替$（this）.val（key）。

$(this).attr("data-url");

而不是

$(this).val('data-url');

如何从$（this）获取值

5 个答案: