привязать после отвязки окна Jquery

Я создаю страницу с двумя разделами, где я загружаю контент .load() в #container, нажимая на заголовки.

<div id=dogs>[dogs]</div> 
<div id=cats>[cats]</div>
<div id=#container></div>
<div class=button_dogs></div>

Моя проблема

У меня есть правая нижняя фиксированная кнопка, которую я хочу отображать только в разделе #dogs (не в разделе cat), и страница инициализируется по умолчанию разделом #dog, поэтому мой код выглядит примерно так

$("#container").load("content.php?s=dogs"); //initial

$("#cats").click(){function(){
      $("#container").load("content.php?s=cats"); //after click
      $(".button_dogs").hide();
      $(window).unbind(".button");
}}

$("#dogs").click(){function(){
      $("#container").load("content.php?s=dogs"); //after click
      $(".button_dogs").show(); 
      $(window).bind("scroll.button");

}}

Это фиксированная кнопка, привязанная к window

$(".button_dogs").hide();
$(window).bind("scroll.button", function(){
      if($(this).scrollTop()>50) {
          $(".button_dogs").show()
      } else {
          $(".button_dogs").fadeOut()
      }
});

Я не знаю, что я делаю неправильно. При нажатии на #dogs он снова связывает функцию фиксированной кнопки, но не работает с эффектами, которые были раньше. Это строка, в отношении которой у меня есть сомнения (из события #dogs click )

$(".button_dogs").show();   
$(window).bind("scroll.button");

jquery bind unbind
person joe    schedule 08.03.2018    source источник
comment
В трех строках HTML, которые вы разместили здесь, у вас есть как минимум две ошибки.   -  person myfunkyside    schedule 08.03.2018
comment
все работает, кроме .bind() для восстановления функции прокрутки, обновления столь важных тегов html...   -  person joe    schedule 08.03.2018
comment
@myfunkyside Почему бы не объяснить, что они должны заключать идентификаторы элементов и классы в кавычки, а не просто говорить есть ошибки? Не полезно.   -  person Reinstate Monica Cellio    schedule 08.03.2018
comment
Я бы сосредоточился на вашем HTML, прежде чем даже думать о JS/jQuery <div id="dogs">[dogs]</div><div id="cats">[cats]</div><div id="container"></div><div class="button_dogs"></div>   -  person Barskey    schedule 08.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, вам нужно заключить идентификаторы элементов и классы в кавычки. Некоторым браузерам все равно, а другим нет. Кроме того, не добавляйте префикс идентификатора контейнера к хешу, если только вы не используете селектор для его поиска...

<div id="dogs">[dogs]</div> 
<div id="cats">[cats]</div>
<div id="container"></div>
<div class="button_dogs"></div>

Вы можете делать то, что пытаетесь сделать, не удаляя и не добавляя повторно функцию обработчика событий. Этот метод будет использовать атрибут данных в элементе div содержимого, чтобы указать тип содержимого, поэтому обработчик прокрутки может просто выйти, если это не собачье содержимое...

// keep a reference to the content div, rather than keep looking it up...
var $container = $("#container");

$("#cats").click(function() {
    $container
        .load("content.php?s=cats")
        .data("content", "cats");       // add a data attribute that has the value "cats"
});

$("#dogs").click(function() {
    $container
        .load("content.php?s=dogs")
        .data("content", "dogs");       // add a data attribute that has the value "dogs"
});

$(".button_dogs").hide();

$(window).bind("scroll.button", function() {
    // if the content is not dogs then exit this function...
    if ($container.data("content") != "dogs") return;

    if ($(this).scrollTop() > 50) {
        $(".button_dogs").show();
    }
    else {
        $(".button_dogs").fadeOut();
    }
});

$("#dogs").trigger("click");  // click the dogs button to initialize the page

Я также добавил переменную $content, которая является ссылкой на элемент #content, поэтому вам не нужно искать ее каждый раз, когда вы на нее ссылаетесь. Повторные поиски не так дороги с идентификатором, но это хорошая привычка.

Наконец, я добавил код для нажатия кнопки собачки при загрузке страницы, вместо того, чтобы дублировать код, который выполняется, когда это происходит.

person Reinstate Monica Cellio    schedule 08.03.2018
comment
Я думал, что эта проблема связана с привязкой и отвязкой события прокрутки. ваши советы так же полезны. Инициализация с этим довольно умна $("#dogs").trigger("click");, я решил проблему, спасибо за ваш ответ, - person joe; 08.03.2018
comment
Нет проблем - рад помочь :) - person Reinstate Monica Cellio; 08.03.2018