使用動態創建的HTML <a>標記</a>調用Javascript函數<a>不起作用</a>

Question

這似乎是一個簡單的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();

Answer 1

假設您有這個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>

Answer 2

此處演示

更改此行：

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

至 ：

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

append后，我們會將click事件關聯到您的<a> ，每次單擊都會調用myfunc(url) 。