Question

使用动态生成的锚标记调用jquery不起作用。与硬编码锚标签相同，jquery工作正常。

代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">      </script>
    <script>
    $(document).ready(function(){

        var value = "HI!!!";
        $("button").click(function(){
            $("#box").html("<a class='dynamic' href='#' dataid='"+value +"'>Generate</a>");
        });
        $(".hardcode").click(function () {
            alert("Calling function");
        });
        $(".dynamic").click(function () {
            alert("ggsss function");
        });

    });
    </script>
</head>
<body>
    <a class="hardcode" href="#" dataid="sss">Generate</a>
    <button>Change content of all p elements</button>

    <div id="box">
    </div>
</body>
</html>

Answer 1

由于dynamic锚标记类是动态添加的，因此您需要使用事件委派来注册事件处理程序，如：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#box').on('click', '.dynamic', function(event) {
    event.preventDefault();
    alert("ggsss function"); 
});

这会将您的事件附加到#box元素中的任何锚点，减少必须检查整个document元素树并提高效率的范围。

Fiddle Demo

更多信息：

Answer 2

将$(document).on("click")用于动态生成的元素

var value = "HI!!!";
$("button").click(function(){
    $("#box").html("<a class='dynamic' href='#' dataid='"+value +"'>Generate</a>");
});
$(document).on("click",".hardcode",function () {
 alert("Calling function");
});
$(document).on("click",".dynamic",function () {
 alert("ggsss function");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <a class="hardcode" href="#" dataid="sss">Generate</a>
     <button>Change content of all p elements</button>

     <div id="box">
     </div>

锚点标记与jquery无法正常工作

2 个答案: