jQuery单击事件重新加载页面

Question

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

 $(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 tag的值保持不变。也就是说，即使我单击其他值，它也只显示循环中的第一个值。

我使用的是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());
});

Answer 2

如果您想要防止默认，click处理函数应该返回false。如果preventDefault方法可用，jQuery会在内部委托给它。

Answer 3

以下是一些事情：

1. 我会将单击事件调用放在文档就绪函数中。元素还没有出现，

，

1. ，我会使用一个委托来捕捉点击事件。

$(‘#search-results’) });

• $('#search-results').empty()；(‘a.bk_name’，‘.delegate’，function(e){ e.preventDefault()；alert($(This).html()；警报没有完成预期的操作。使用.html()并传入要追加的对象可能会更好。