jQuery 点击事件重新加载页面

Question

我有一个可以在 dom 上运行的 jQuery 代码。它还动态创建元素。当我调用这些动态元素之一的单击事件时，它不会调用其单击事件内的代码，而是重新加载页面并再次调用页面加载上的函数。基本上，它根本不运行单击事件内的代码。

 $(document).ready(function(){

                loadPage();

                function loadPage() {   

                    var value = $("#search").val();

                    //create post data
                    var postData = { 
                        "value" : value
                    };

                    //define ajax config object
                    $.ajax({
                        type: "post",
                        url: "search.php",
                        data: postData, 
                        dataType: "json",
                        success: function(data) {

                            if(!data[0].success){
                                alert(data[0].er);

                            }
                            else {
                                $('#search-results').empty();
                                var div_main = $("<div>").attr('id', "search-content").appendTo("#search-results"); 

                                for (var x = 0; x < data.length; x++) {

                                     var div = $("<div>").attr('id', "search-content-container").appendTo(div_main); 

                                     var div_en_quotes = $("<div>").attr('id', "search-en-quotes").html(data[x].cQuotes).appendTo(div);
                                     var div_author = $("<div>").attr('id', "search-author").html(data[x].vAuthor).appendTo(div);
                                     var div_ref = $("<div>").attr('id', "search-bookref").html("<a class='bk_name' href='?bookname="+ data[x].vBookName +"'>" + data[x].vBookName +"</a> "+ data[x].vRef).appendTo(div);


                                }
                            }
                        }
                    }); 

                }
 });

$(document).on("click", "a.bk_name", function(e){ 

                    e.preventDefault();
                    alert($('.bk_name').html());

            });

如果我添加 e.preventDefault，它会阻止页面重新加载并执行代码，但 anchor 标记 的值保持静态。也就是说，即使我单击其他值，它也只显示循环中的第一个值。

我使用的是 jQuery 1.7。

Answer 1

是的，确实，您确实显示了 DOM 中找到的第一个 a.bk_name 的值。也许你的意思是

$(document).on("click", "a.bk_name", function(e){ 
    e.preventDefault();
    alert($(this).html()); // instead of alert($('.bk_name').html());
});