Jquery数据属性不起作用

时间:2015-12-21 23:19:37

标签: javascript jquery

我知道它重复,但请参阅下文;

我的锚链接

 <a onclick="updateStatus(this)" data-pid="@job.Id" data-act="@action.Activity" data-sts="@action.StatusToSet" class="btn btn-xs btn-circle @action.CssClass @action.BackgroundColor" href="#">
                                            @action.Text
                                        </a>

我的javascript函数

function updateStatus(elem) {
    var preAssignedJobId = $(elem).attr("data-pid");
    var activity = $(elem).attr("data-act");
    var statusToSet = $(elem).attr("data-sts");
}

但是我得到了所有上述的Undefined。我无法看到任何问题,有人可以指出。我的jquery版本是1.11。

4 个答案:

答案 0 :(得分:2)

当您致电this

时,您应该将updateStatus()作为参数传递
<a onclick="updateStatus(this)" data-pid="@job.Id" data-act="@action.Activity" data-sts="@action.StatusToSet" class="btn btn-xs btn-circle @action.CssClass @action.BackgroundColor" href="#">
                                            @action.Text
                                        </a>

这个函数的参数

function updateStatus(param) {
    //  Then use param
    var preAssignedJobId = $(param).data("pid");
    var activity = $(param).data("act");
    var statusToSet = $(param).data("sts");
}

答案 1 :(得分:0)

将你的元素传递给函数。

function updateStatus(elm) {
    var preAssignedJobId = $(elm).data("pid");
    var activity = $(elm).data("act");
    var statusToSet = $(elm).data("sts");
    $(elm).text("hhH");
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a onclick="updateStatus(this)" data-pid="@job.Id" data-act="@action.Activity" data-sts="@action.StatusToSet" class="btn btn-xs btn-circle @action.CssClass @action.BackgroundColor" href="#">
                                            @action.Text
                                        </a>

答案 2 :(得分:0)

您只需将click事件委托给anchor并提取所需信息即可。

$('a').on("click",function(e)
{
    //e.preventDefault();
    var preAssignedJobId = $(this).data("pid");
    alert(preAssignedJobId);
    var activity = $(this).data("act");
    var statusToSet = $(this).data("sts");

});

示例:https://jsfiddle.net/DinoMyte/opmy3n8j/

答案 3 :(得分:-1)

由于您已经在使用jQuery,请从HTML代码中删除您的onclick,然后使用jQuery事件处理程序。

<强> HTML

 <a id="anch1" data-pid="@job.Id" data-act="@action.Activity" data-sts="@action.StatusToSet" class="btn btn-xs btn-circle @action.CssClass @action.BackgroundColor" href="#">
                                            @action.Text
                                        </a>

<强> 的jQuery

$(function(){
    $("#anch1").click(function(){
      var $this = $(this);
      var preAssignedJobId = $this.data("pid");
      var activity = $this.data("act");
      var statusToSet = $this.data("sts");
    });
});