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

如果要防止默认，则单击处理函数应返回false。如果可用的话，jQuery在内部委托使用preventDefault方法。

Answer 3

一些事情：

我会将单击事件调用放在文档就绪函数中。这些元素还没有。

我会使用委托来捕获点击事件。

$('#search-results').delegate('a.bk_name', 'click', function(e){ 
    e.preventDefault();
    alert($(this).html());
});

$（ '＃搜索结果'）空（）;没有做你期望的事。可能更好地使用.html（）并传入你要追加的对象。

jQuery click事件重新加载页面

3 个答案: