jquery가 작동하지 않는 앵커 태그

동적으로 생성 된 앵커 태그가있는 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>

출처

2016-07-06 bharathi

"작동하지 않음"은 전문 용어가 아닙니다. – Rob

사용 $(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>

출처

2016-07-06 11:00:50

dynamic 앵커 태그 클래스가 동적으로 추가되기 때문에, 당신은 같은 이벤트 핸들러 등록 이벤트 위임을 사용해야합니다이가 이벤트를 첨부합니다

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

을 #box 요소 내의 모든 앵커, 요소 트리 전체를 확인하고 효율성을 높이려면 범위를 줄여야합니다.

Fiddle Demo

추가 정보 :

출처

2016-07-06 10:57:05

jquery가 작동하지 않는 앵커 태그

답변

관련 문제