在创建mvc链接时传递onClick javascript函数

Passing an onClick javascript function when crafting an mvc link

本文关键字：onClick javascript 函数 创建 mvc 链接      更新时间：2023-09-26

我有一些超链接，它们有一个通用的类名。这些超链接是用mvc asp.net助手在我的网页上动态创建的。现在我想写一个脚本，确定被点击的特定链接，并在点击该链接时执行javascript函数。我的代码在下面。

我的mvc代码生成链接，请注意函数传递updateWaitingState（this）

td> @AntiXss.HtmlEncode(customerchatname) @Html.ActionLink("chat", "StartChat", new { threadid = avisitor.ThreadID, email = AntiXss.HtmlAttributeEncode(email) }, htmlAttributes: new { target = "_blank", @class = "chat", operatorid = avisitor.OperatorID, connectionid = AntiXss.HtmlAttributeEncode(connectionid), threadid = avisitor.ThreadID, onClick = "updateWaitingState(this);" })</td>

我的这个链接的javascript函数如下，JQuery已经在上面的链接中被调用了。

<script type='text/javascript'>
     function updateWaitingState(sender) {
            var parentid = $(sender).attr("data-parentid");
            alert(parentid);
        }
    </script>

问题是浏览器为发送方对象生成了一个未定义的。我试了几个小时调试，似乎找不到问题。

当我在浏览器中运行代码时。html看起来像这个

<tr id="kayode@yahoo.com">
                    <td> kayode <a class="chat" connectionid="135976e6-799b-4cda-a764-a00f7110d515" href="/Visitor/StartChat?threadid=3&amp;email=kayode%40yahoo.com" onclick="updateWaitingState(this);" operatorid="1" target="_blank" threadid="3">chat</a></td>
                    <td>271.0.0.1</td>
                    <td>Waiting</td>
                    <td></td>
                    <td>9/13/2014</td>
                    <td>04:15:18</td>
                    <td>00:00:10</td>
                    <td>271.0.0.1</td>
                </tr>

不是未定义的sender，而是parentid的值，因为操作链接的html没有data-parentid属性。将html修改为

@Html.ActionLink(..., htmlAttributes: new { ... data-parentid="SomeValue", onClick = "updateWaitingState(this);" })

给anchor标签一个唯一的id，比如'a1'，然后尝试这个：

document.getElementById('a1').addEventListener('click', function(e){
  e.preventDefault();
  alert($(this).data('parentid'));
});

演示

编辑：-如果您想在类上添加事件侦听器，请执行以下操作：

document.querySelector('[class=chat]').addEventListener('click', function(e){
  e.preventDefault();
  alert($(this).data('parentid'));
});

演示

或者尝试纯Jquery方法：-

$("a[class='chat']").click(function(e){
    e.preventDefault();
    alert($(this).data('parentid'));
});

并确保在你的锚标签中有一个attribute，即data-parentid。

我必须更正我生成的这个html。问题不在于javascript，而在于html。

<a href="@Url.Action("StartChat", new { threadid = avisitor.ThreadID, email = AntiXss.HtmlAttributeEncode(email) })" class="chat" target="_blank" data-parentid="@AntiXss.HtmlAttributeEncode(email)" onclick="updateWaitingState(this);">chat</a>

这解决了问题。非常感谢你的贡献。我真的很感激！！！！。

相关文章：