функция jquery .click не срабатывает при нажатии кнопки. Приходится нажимать много раз

#jquery #html #css

#jquery ( jquery ) #HTML #css — код

Вопрос:

У меня есть этот код jquery :

 $(document).ready(function() {
        $('div.badge_button > .more').click(function() {
        var id = $(this).attr('id');
        $('#window').fadeIn();
        $("#window").empty().html('<img src="images/loading.gif" />');
        $('#window').load('badge.php', {id:id});
        $.scrollTo( '#window', 200 );

});
});

и этот html :

 <div class = 'badge_button'><a href='#' id = '1' class='more'>More</a></div>

Моя проблема в том, что мне приходится нажимать кнопку «Еще» много раз, прежде чем она действительно сработает. Это происходит время от времени. Это из-за поведения по умолчанию или это как-то связано с href='#' ?

1. Вам нужно вернуть false; или preventDefault в вашем клике, иначе он все равно обновит сайт с помощью хэштега. Итак, вы нажимаете один раз, он обновляется, вы нажимаете дважды — он уже есть — и показывает функцию. По крайней мере, моя теория 🙂

2. что такое элемент управления с окном идентификатора?

Ответ №1:

Я думаю, что проблема не в добавлении return false; . Вам это нужно, потому href=# что перезагружает страницу.

 $(document).ready(function() {
        $('div.badge_button > .more').click(function() {
        var id = $(this).attr('id');
        $('#window').fadeIn();
        $("#window").empty().html('<img src="images/loading.gif" />');
        $('#window').load('badge.php', {id:id});
        $.scrollTo( '#window', 200 );
        return false;
});
});

Надеюсь, это поможет…

Ответ №2:

Да, ваша логика Jquery в порядке, но href=# она перезагружает страницу.

Просто добавьте return false; в свою логику Jquery.

 $(document).ready(function() {
        $('div.badge_button > .more').click(function() {
             var id = $(this).attr('id');
             $('#window').fadeIn();
             $("#window").empty().html('<img src="images/loading.gif" />');
             $('#window').load('badge.php', {id:id});
             $.scrollTo( '#window', 200 );
             return false;
        });
});

Ответ №3:

Я предполагаю, что проблема заключается в ссылке на объект window (надеюсь, на который вы пытаетесь сослаться).

В этом случае ваш код должен выглядеть так:

 $(document).ready(function() {
        $('div.badge_button > .more').click(function() {
        var id = $(this).attr('id');
        $(window).fadeIn();
        $(window).empty().html('<img src="images/loading.gif" />');
        $(window).load('badge.php', {id:id});
        $.scrollTo( window, 200 );
        });
});

Посмотрите, как вы ссылаетесь на документ при привязке события.

Демонстрация: посмотрите на консоль ошибок, теперь вы обнаружите сообщение об ошибке «страница не найдена», поскольку эта страница не существует на сервере. надеюсь, это должно сработать на вашем сайте.

Также быстрое предложение, вы можете избавиться от document.ready и вместо этого использовать живой обработчик. Что-то вроде:

 $('div.badge_button > .more').live("click",function() {
        var id = $(this).attr('id');
        $(window).fadeIn();
        $(window).empty().html('<img src="images/loading.gif" />');
        $(window).load('badge.php', {id:id});
        $.scrollTo( window, 200 );
        });

Надеюсь, это поможет.