Сделайте контент div кликабельным с помощью вложенных div

Question

У меня есть следующий макет:

<div id="content">
  <div id="img"><img src=""></div>
  <div id="main">Some content</div>
  <div id="btn" class="hidden"><button>Submit</div>
  <div class="hidden">Some other stuff</div>
</div>

У меня есть событие jQuery click, связанное с div содержимого, которое расширяет его и делает видимыми скрытые div (кнопка и другое содержимое).У меня также есть событие, связанное с кнопкой, которая активирует модальное нажатие.

Развертывание / свертывание div работает без проблем при использовании методов скрытия / показа.Проблема заключается в том, что после нажатия на кнопку div сворачивается, даже если модал активирован.

Так что после нажатия на кнопку Submit, модал всплывает, но в фоновом режиме основной div сворачивается.Я пытаюсь оставить основной div открытым, если нажата кнопка «Отправить».

Я попытался установить для полей z-index и содержащего div значение, превышающее значение содержимого div;это не помогло.

Как сохранить функциональность щелчка в любом месте свернутого div (где кнопка и дополнительный контент не видны), расширяет этот div и нажатие на кнопку в расширенном div активирует модальный режимдиалог без сворачивания основного div?

Спасибо

Answer 1

Вы должны предотвратить всплывание события.Когда вы нажимаете кнопку, событие click всплывает в DOM-дереве и запускает другие обработчики событий.

Посмотрите на event.stopPropagation():

$('button').click(function(event) {
    event.stopPropagation()
    // modal stuff
});

---

Вы также можете игнорировать все клики, которые не происходят в #content div:

$('#content').click(function(event) {
    if(event.target == this) {
       // hide/colapse
    }
});

Это может быть лучше, если вы хотите нажать «где угодно» внутриdiv, не скрывая этого.

Answer 2

Попробуйте добавить e.stopPropagation () в событие нажатия кнопки. Как это:

$("#btn").click(function(e) {
    e.stopPropagation();
    // some other code
});

Answer 3

$("#btn").click(function(event){
  event.stopPropagation();
  // do something
});  

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

Answer 4

Звучит так, будто событие click от кнопки используется для открытия модального (как вы хотите), но затем продолжает распространяться вверх по дереву DOM, пока не вызовет обработчик события onclick для div «content»хорошо, закрывая его.

Вы можете остановить это, либо вернув false из функции onclick вашей кнопки, либо вызвав event.stopPropagation() в любом месте этой же функции.!