Событие jQuery click перезагружает страницу

Question

У меня есть код JQuery, который работает на DOM готов.Это также создает элементы динамически.Когда я вызываю событие 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

Да, действительно, вы отображаете значение первого a.bk_name, найденного в DOM.Может быть, вы имеете в виду

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

Answer 2

Несколько вещей:

1. Я бы поместил вызов события по щелчку внутри функции готовности документа. Элементы еще не там.

2. Я бы использовал делегата для отслеживания событий при нажатии.

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

3. $ ( '# Поисковых результаты') пусто (); не делает то, что вы ожидаете. Возможно, лучше использовать .html () и передать объект, который вы добавляете.

Answer 3

Функция обработчика щелчка должна возвращать false, если вы хотите запретить использование по умолчанию. jQuery внутренне делегирует методу предотвращению дефолта, если он доступен.