JS перестает работать при добавлении FORM

Question

Я хочу закрыть окно комментариев, когда я нажимаю кнопку «Отмена», а также не оставляю сообщение, если в поле комментариев есть 0 символов. Этот код работает отлично:

$(function() { 
    $('.panel-google-plus > .panel-footer > .input-placeholder, .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > button[type="reset"]').on('click', function(event) { 
     var $panel = $(this).closest('.panel-google-plus'); 
     $comment = $panel.find('.panel-google-plus-comment'); 

     $comment.find('.btn:first-child').addClass('disabled'); 
     $comment.find('textarea').val(''); 

     $panel.toggleClass('panel-google-plus-show-comment'); 

     if ($panel.hasClass('panel-google-plus-show-comment')) { 
      $comment.find('textarea').focus(); 
     } 
    }); 
    $('.panel-google-plus-comment > .panel-google-plus-textarea > textarea').on('keyup', function(event) { 
     var $comment = $(this).closest('.panel-google-plus-comment'); 

     $comment.find('button[type="submit"]').addClass('disabled'); 
     if ($(this).val().length >= 1) { 
      $comment.find('button[type="submit"]').removeClass('disabled'); 
     } 
    }); 
}); 

И когда я добавляю FORM в HTML:

<form method="POST" action="/komentuoti/{{$p->id}}"> 
    {!! csrf_field() !!} 
    <div class="panel-google-plus-textarea form-group"> 
    <textarea rows="2" cols="60" class="form-control" name="body" placeholder="Rašykite komentarą"></textarea> 
    <br> 
    <button type="submit" class="btn btn-success disabled">Post</button> 
    <button type="reset" class="btn btn-default">Cancel</button> 
    <hr> 
    <strong><h5>Komentarai</h5></strong> 
    @foreach($p->comment as $com) 
     <ul class="list-unstyled"> 
     <li><strong>{{$com->user->name}}</strong> {{$com->body}}</li> 
     </ul> 
    @endforeach 
    </div> 
    <div class="clearfix"></div> 
</form> 

не работает JS больше, комментарий коробка не будет закрывать. Как это исправить? Он отлично работает без <form></form>

Answer 1

Я уверен, что это потому, что селектор .panel-google-plus-comment > .panel-google-plus-textarea проходит правильно, без формы внутри, но с этим не справляется. Рассмотрим два фрагмента ниже:

<!-- Snippet 1 --> 
<div class="outer"> 
    <div class="inner"></div> 
</div> 

<!-- Snippet 2 --> 
<div class="outer"> 
    <div class="hello"> 
    <div class="inner"></div> 
    </div> 
</div> 

В первом фрагменте, селектор .outer > .inner матчи, потому что inner элемент является прямым потомком outer элемента. Во втором селектор .outer > .inner делает не, так как inner является ребенком hello, а не outer. Вместо этого .outer > .hello > .inner будет соответствовать, потому что hello - ребенок outer, а inner - ребенок hello.

Теперь, если вы использовали .outer .inner, было бы не быть проблемой в любом случае, потому что вместо того, чтобы пытаться соответствовать прямым детей, все, что вам все равно, что это потомок. Это включает в себя ребенка, как первый фрагмент, внук, как второй фрагмент, правнук и так далее. Или, другими словами, .outer .inner бы даже соответствовать <input> в этом:

<div class="outer"> 
    <span class="what"> 
    <a class="in"> 
     <em class="the"> 
     <strong class="world"> 
      <form> 
      <input class="inner"> 
      </form> 
     </strong> 
     </em> 
    </a> 
    </span> 
</div> 

Если вы хотите использовать только дочерние селекторы, чтобы попасть туда, вам придется использовать .outer > .what > .in > .the > .world > form > .inner по крайней мере.