Question

我正在基于我收到的JSON数据在FLY上创建几个链接（使用jQuery html函数）。每个链接都有id＆＃34; idxxxx＆＃34; （xxxx是主键）。

这是我使用的javascript代码：

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

试试这个：

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

Answer 2

问题是你在添加链接之前添加了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/

单击事件未在我的链接上触发，如何修复？

2 个答案: