클릭 이벤트가 내 링크에서 트리거되지 않았습니다. 수정하는 방법은 무엇입니까?

Question

내가받는 JSON 데이터를 기반으로 FLY에서 여러 링크 (jQuery html 함수 사용)를 만들고 있습니다. 각 링크는 id "idxxxx"(xxxx는 기본 키)입니다.

는

이것은 내가 사용하고 자바 스크립트 코드 :

$(document).ready(function(){ 
    onLoad(); 

    $("a[id^=id]").on("click", function(event) { 
     alert('here'); 
    }); 

    function onLoad() { 
     $(document).prop("title", "Course Listing"); 

     getCourses(); 
    } 

    function getCourses(name) { 
     $.ajax({ 
      url: "http://localhost/courses/getCourses?format=json" 
      , dataType: "json" 
      , data: {name: name} 
      , success: function(data, status) { 
       populateCourses(data); 
      } 
     }); 
    } 

    function populateCourses(data) { 
     var html = ""; 

     if (data.length > 0) { 
      $.each(data, function() { 
       html += "<a href='##' id='id" + this.ID + "'>Edit</a><br />"; 
      }); 
     } 

     $("#courselist").html(html); 
    } 
}); 

내 문제는 생성 된 링크를 클릭 이벤트를 트리거하지 않습니다.

테스트로 수동으로 내 페이지에 다른 링크와 비슷한 ID로 링크 태그를 만들었으며 이 아니며에 같은 문제가 발생했습니다. 경고 상자가 정상적으로 표시됩니다.

해결 방법에 대한 의견이 있으십니까? 감사합니다

Answer 1

문제는 링크가 추가되기 전에 onClick을 추가하는 것이기 때문에 비동기적인 ajax가 반환 된 후 링크가 추가되기 때문입니다.

function populateCourses(data) { 
    var html = ""; 

    if (data.length > 0) { 
     $.each(data, function() { 
      html += "<a href='##' id='id" + this.ID + "'>Edit</a><br />"; 
     }); 
    } 

    $("#courselist").html(html); 

    $("a[id^=id]").on("click", function(event) { 
     alert('here'); 
    }); 
} 

http://jsfiddle.net/z6bnwjy7/

Answer 2

이 시도 :

$(function() { 
 
    var ar = []; 
 
    for (var i = 1; i <= 10; i++) { 
 
    ar.push("<a href='#' id='id" + i + "'>Link " + i + " </a>"); 
 
    } 
 

 
    $("#courselist").html(ar.join('')); 
 

 
    //THIS WILL ADD CLICK HANDLER TO ANY A INSIDE div#courselist 
 
    //EVEN IF IT IS ADDED AT RUNTIME 
 
    $("#courselist").on("click", "a[id^='id']", function(event) { 
 
    $("#log").append($("<span/>").text($(this).text())); 
 
    }); 
 
});

a { 
 
    margin: 2px; 
 
    padding: 3px; 
 
    outline: none; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
    </script> 
 
<div id="courselist"></div> 
 
<div id="log"></div>