jQuery click事件重新加载页面 [英] jQuery click event reloads the page

问题描述

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

I have a jQuery code which runs on dom ready. It also creates elements dynamically. When I call the click event of one of these dynamic elements, instead of calling the code inside its click event, it reloads the page and the function on pageload is again called. Basically, it doesn't run the code inside click event at all.

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

If I add e.preventDefault, it stops the page from reloading and does execute the code, but the value of the anchor tag remains static. That is, it only displays the first value in the loop even if I click on other values.

我正在使用jQuery 1.7.

I'm using jQuery 1.7.

推荐答案

是的，确实可以显示DOM中找到的第一个a.bk_name的值.也许你是说

Yes indeed, you do display the value of the first a.bk_name found in the DOM. Maybe you mean

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

这篇关于jQuery click事件重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！