处理动态html标签jQuery的数据[重复]

Question

我有这个代码，

    $('#gogo').click(function(e){

    var data='<a href="http://www.google.com" class="myButtons">Google</a><a href="http://www.microsoft.com" class="myButtons">Microsoft</a>";
            $("#showResults").html(data);

    });


    $(".myButtons").click(function(e) {
        e.preventDefault();
        alert($(this).attr("href"));
        $("#result").attr("src", $(this).attr("href"));
    });


<button id="gogo">Click me</button>

<div id="showResults"></div>

<iframe id="result" name="result" src="" width="750px" height="450px" frameBorder="0"></iframe>

我想知道为什么它不起作用。也许是因为没有新添加的 html 标签的事件处理程序？

我不想使用 target="result"

谢谢。

Answer 1

您的代码未将事件侦听器绑定到动态创建的 dom 节点。检查我的解决方案：

$('#gogo').click(function(e){
    var data='<a href="http://wikipedia.org" class="myButtons">Wikipedia</a><a href="http://www.microsoft.com" class="myButtons">Microsoft</a>';
    $("#showResults").html(data);
});


$("body").on("click", ".myButtons", function(e) {
    e.preventDefault();
    alert($(this).attr("href"));
    $("#result").attr("src", $(this).attr("href"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="gogo">Click me</button>

<div id="showResults"></div>

<iframe id="result" name="result" src="" width="750px" height="450px" frameBorder="0"></iframe>