使用动态创建的HTML <a> tag not working</a>调用Javascript函数

时间:2013-09-05 00:44:46

标签: javascript jquery html href

这似乎是一个简单的JavaScript,但我觉得这个问题很愚蠢......但我不知道为什么这不起作用。我有一个方法可以在页面上动态创建一些超链接。超链接假设使用url作为参数调用可执行文件。因此,我使用href调用此函数,该函数具有调用可执行文件的代码。

非动态锚标记代码可以很好地启动exe。

但是,我需要这个来处理动态超链接。我试图简化问题并创建以下jsFiddle来演示此问题。该链接不会调用我的方法。我错过了一些愚蠢的东西吗?我希望这可以在IE中使用。

我已经尝试过一些人发布的解决方案:我应该尝试href="#" onclick="myfunc();"。不知怎的,这也没用。

这是我的代码:

function myfunc(url){
    alert(url);
};

function dynfunc(){
    var value = "This is a link";
    var url="http://www.google.com";
    var table = $("<table id='tab1'></table>");
    var row = $("<tr></tr>");
    var valueColumn = $("<td></td>");
    $('<a href="javascript: myfunc(\'' + url + '\');"></a>').html(value).appendTo(valueColumn);

    valueColumn.appendTo(row);
    row.appendTo(table);
    $("#div1").append(table);
};

dynfunc();

2 个答案:

答案 0 :(得分:0)

假设你有这个html:

<table id="dyn">
    <tbody>
    </tbody>
</table>

您可以将此JavaScript用于动态添加的<a/>,这样您就可以添加一个点击处理程序而不是多个处理程序。

<script>
    $(function() {
        var tbl = $('#dyn'), tbody = tbl.find('tbody');

        var addLink = function(url, val) { 
            var tr = $('<tr/>'),
                td = $('<td/>').appendTo(tr),
                a = $('<a/>', {href: url}).html(val).appendTo(td);
        }

        tbl.on('click', 'a', function() {
            alert($(this).attr('href'));
        });

        //some ajax that calls addLink
    });
</script>

答案 1 :(得分:0)

<强> DEMO HERE

更改此行:

 $('<a href="javascript: myfunc(\'' + url + '\');"></a>').html(value).appendTo(valueColumn);

收件人:

 $('<a href="#"></a>').html(value).appendTo(valueColumn).click(function(){myfunc(url) });

我们会在click之后将<a>事件与append相关联,并且每次点击都会调用myfunc(url)