当用户点击动态创建的链接时如何调用 JS 方法。 jQuery、ASP.NET MVC答案

【问题标题】：How to call a JS method when user clicks at dynamically created link. JQuery, ASP.NET MVC当用户点击动态创建的链接时如何调用 JS 方法。 jQuery、ASP.NET MVC
【发布时间】：2015-04-03 09:56:59
【问题描述】：

我在视图中动态创建一个链接来调用控制器的方法：

   $(document).ready(function(){
     var data="SomeDataToController";
     var link=document.createElement('a');
     var linkText=document.createTextNode("Delete");
     link.appendChild(linkText);
     link.title="Title text";
     link.href=HelloWorld(ee); 
    document.getElementById("imageBox1").
    appendChild(link);


    }
   function HelloWorld(data){
    alert(data);}

如果用户点击“删除”链接，如何调用方法 HelloWorld(data)？

我尝试在“onclick”事件中调用代码，但 HelloWorld() 函数在构建标签时立即调用。但是，我想在用户点击链接时拨打电话。

【问题讨论】：

$(link).click(HelloWorld) ?

标签： javascript jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

您正在尝试附加事件。您需要使用addEventListener 或attachEvent 而不是直接将函数分配给href。

if (window.addEventListener) {
  link.addEventListener('click', HelloWorld(ee), false);
} else if (window.attachEvent) {
  link.attachEvent('onclick', HelloWorld(ee));
}

【讨论】：

这不会也立即调用HelloWorld，并将其返回值设置为函数处理程序，而不是函数本身吗？

【解决方案2】：

这里有两个主要问题：您不应该尝试通过将 href 设置为某物来设置 onclick 处理程序，并且您在分配时实际上是在调用 HelloWorld() 函数，所以基本上您是在分配该函数返回的任何内容的href。

您应该使用addEventListener 附加一个在点击时调用HelloWorld() 的函数：

link.addEventListener('click', function() { HelloWorld(data); })

如果您需要在版本 9 之前支持 Internet Explorer，您还需要为此设置条件并使用 attachEvent() 而不是。

【讨论】：

【解决方案3】：

如果你想在用户点击你的元素时执行 JavaScript 函数，你可以使用这样的东西。

   $(document).ready(function () {
        var data = "SomeDataToController";
        var link = document.createElement('a');
        var linkText = document.createTextNode("Delete");
        link.appendChild(linkText);
        link.title = "Delete";
        link.onclick = eval(getDeleted);
        document.getElementById("imageBox1").appendChild(link);

    });

    function getDeleted() {

        var f = "delete";
        Delete(f);
    }

    function Delete(f) {
        alert(f);
    }

但我想使用类似这样的 jQuery 功能。

`

function myHandler(event) {
    alert(event.data.foo);
}
$('#imageBox1 a').on("click", {
    foo: "bar"
}, myHandler);

`

【讨论】：

【解决方案4】：

使用 jQuery 的.on 命令，但将其用作委托。这也是在加载页面后处理对象的创建。

例如，您可以在<body> 级别附加.on，并表示每次单击具有“clickme”类的<a> 时，它将执行您的方法。

类似这样的：

$(body).on("click", ".clickMe", function (e) {
  e.preventDefault();
  HelloWorld('my value taken from data- attribute or whatever');
});

【讨论】：

实施了一个示例。没有测试就写了，但你明白了

【解决方案5】：

我推荐使用 jQuery 创建动态 HTML。

$("#imageBox1").append('<a href="' + javascript:alert(1); + '">' + text + '</a>');

【讨论】：

【解决方案6】：

$(document).on("click", "a", function(data){
    alert(data);
});

【讨论】：

我很确定他不想为文档中的所有标签添加点击处理程序