Почему я не могу скрыть элемент при нажатии с помощью jQuery?

Я хочу, чтобы показать div и с помощью jquery и css. код не работает:Почему я не могу скрыть элемент при нажатии с помощью jQuery?

HTML

<html> 
    <head> 

    </head> 
    <body> 
     <div class="box" id="b1"> 
      <a href="#">click to show content</a> 

      <div class="content"> 
       here is content here is content here is content 
       <div class="button" id="b2">remove content</div> 
      </div 
    </body> 
</html>

JQuery

$(document).ready(function() { 
    $('#b1').click(function() { 

     $('.content').css({ 
      "display": "block" 
     }); 
    }); 

    $('#b2').click(function() { 

     $('.content').css({ 
      "display": "none" 
     }); 
    }); 
});

Демо:http://jsfiddle.net/jTgRF/41/

источник

2012-06-24 user1477955

DIV тег класса "содержания" не закрыто должным образом. Только что упомянуто, хотя это и не причина ошибки. – HOT

Проблема в том, что вы не прекращаете распространение события.

Когда вы нажимаете кнопку, на самом деле он сначала скрывает элемент, но событие распространяется до родительского элемента, на котором вы ловите клик и показываете его снова. Это происходит так быстро, что ничего не происходит, но на самом деле, когда вы нажимаете на #b2, элементы спрятаны, событие затем пузырится до родителя #b1, к которому вы подключили прослушиватель событий щелчка, чтобы показать контент.

Для этого вам необходимо использовать .stopPropagation() на #b2.

$(document).ready(function(){ 
    $('#b1').click(function(){ 
      $('.content').show(); 
    }); 

    $('#b2').on("click", function(e){ 
      $('.content').hide(); 
      e.stopPropagation(); 
    }); 
});

Что вам нужно сделать, это передать событие щелчка в колл-backfunction (объявившего e в моем примере), а затем вызвать stopPropagation() на него, чтобы убедиться, что это не пузырь до родительского элемента ,

Вот рабочий пример: http://jsfiddle.net/jTgRF/64/

Примечание Я использую .show() и .hide(), которая точно так же, как и то, что вы делаете с .css(), но более читаемым на мой взгляд.

Edit:

Как отметил Venu в своем ответе, содержимое будет отображаться, если вы нажмете на черной области, а не только «показать содержимое» -Text.Самый простой способ решить это - просто переместить атрибут id = "b1" из div с содержимым класса и вместо этого разместить его на элементе a.

Смотрите мою обновленную скрипку: http://jsfiddle.net/jTgRF/65/

источник

2012-06-24 14:19:01

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

$('#b2').live('click', function(){ 

       $('.content').css({"display":"none"}); 
     });

Присоединить обработчик события для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.

EDIT
1) Использование на вместо живой, как осуждается Live.

2) Есть еще одна проблема с вашим css. вы установили высоту 150px для класса box. поэтому, если вы нажмете на черную область, событие будет запущено.

Так что перемещайте элемент b2 вне b1, это также решит распространение события на родительский элемент.

источник

2012-06-24 14:11:40 Venu

Это не проблема, элемент находится в DOM при загрузке, он просто не отображается. Проблема в том, что событие распространяется на родительский элемент, который отображает контент сразу же. См. Мой ответ для получения дополнительной информации. –

@ChristoferEliasson Я согласен с вами. Но есть еще одна проблема с его css. он установил высоту 150 пикселей для класса ящиков. поэтому, если вы нажмете на черную область, событие будет запущено. Поэтому переместите элемент b2 вне b1, это также решит распространение события в родительском элементе. – Venu

Это правда, так как вы, вероятно, хотите сохранить высоту на .content-элементе, самый простой способ решить это - это переместить 'id =" b1 "' в 'a'-элемент. –

Вам нужно изменить обработчик Нажмите кнопку для

$('#b2').click(function(e){ 
      e.stopPropagation(); 
      $('.content').css({"display":"none"}); 
    });

Вам нужно добавить event.stopPropagation() Или нажмите событие будет распространяться на родитель div и .content будет скрыт немедленно снова.

Демо:http://jsfiddle.net/joycse06/jTgRF/56/

Вы должны использовать JQuery .show() и .hide(), чтобы показать/скрыть элементы.

источник

2012-06-24 14:19:04

Anwser Venu работает, но live() разлучен.

Вы должны использовать на() вместо того, чтобы:

jQuery .on function for future elements, as .live is deprecated

Код

$(document).ready(function(){ 
    $('#b1').click(function(){ 
     $('.content').css({"display":"block"}); 
    }); 

    $(document).on('click', '#b2', function(){ 
     $('.content').css({"display":"none"}); 
    }); 
});

Надеется, что это помогает

источник

2012-06-24 14:20:30

'.live()' устарел в пользу '.on()' действительно, но это не проблема. Элемент доступен в DOM во время загрузки. Проблема заключается в распространении события. См. Мой ответ. –

Кроме того, вероятно, это был комментарий или изменение ответа Вену, а не новый ответ. –

Почему я не могу скрыть элемент при нажатии с помощью jQuery?

ответ

Смежные вопросы