событие клика не срабатывает по моей ссылке, как исправить?

Question

Я создаю несколько ссылок (используя функцию jQuery html) в FLY на основе данных JSON, которые я получаю. Каждая из ссылок имеет идентификатор idxxxx (xxxx - первичный ключ).

Это Java-код, я использую:

$(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); 
    } 
}); 

Моя проблема заключается в том, что ссылки, созданные не срабатывает на событие щелчка.

В качестве теста я вручную создал тег ссылки на своей странице с похожим идентификатором, как и другие ссылки, и я не столкнулся с той же проблемой. Поле предупреждения отображается в порядке.

Любые идеи о том, как исправить это? Спасибо

Answer 1

Проблема заключается в том, что вы добавляете onClick перед добавлением ссылок, потому что ссылки добавляют некоторое время после возвращения ajax, который является асинхронным. Самое простое решение, чтобы добавить щелчок в методе populateCourses:

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>