2016-07-06 200 views
0

使用動態生成的錨定標記調用jquery不起作用。而與硬編碼錨標籤相同的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> 
+0

「不工作」不是一個技術術語。 – Rob

回答

0

使用$(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>

2

由於dynamic錨標記類動態添加,你將需要使用事件代表團註冊事件處理程序,如:

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

這會將事件附加到#box元素內的任何錨點, 減少了必須檢查整個元素樹並提高效率的範圍。

Fiddle Demo

更多信息: