JS funktioniert nicht mehr beim Hinzufügen von FORM

Question

Ich möchte Kommentarfeld schließen, wenn ich auf "Abbrechen" klicken und auch nicht lassen, wenn 0 Zeichen im Kommentarfeld sind. Dieser Code funktioniert gut:

$(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'); 
     } 
    }); 
}); 

Und wenn ich FORM in html hinzufügen:

<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> 

Die JS funktioniert nicht mehr, wird das Kommentarfeld nicht aus nächster Nähe. Wie behebe ich das? Es funktioniert gut ohne <form></form>

Answer 1

Ich bin mir ziemlich sicher, es ist, weil der Selektor .panel-google-plus-comment > .panel-google-plus-textarea geht richtig ohne das Formular innerhalb, aber scheitert damit. Betrachten wir die beiden Schnipsel unten:

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

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

Im ersten Schnipsel der Wähler .outer > .inner Streichhölzer, weil das inner Element ein direkter Nachkomme des outer Element ist. In der zweiten, der Selektor .outer > .inner tut nicht übereinstimmen, denn die inner ist die hello 's Kind, nicht die outer' s. Stattdessen würde .outer > .hello > .inner übereinstimmen, denn hello ist outer 's Kind, und inner ist hello' s Kind.

Nun, wenn Sie .outer .inner verwendet, es wäre nicht ein Problem in jedem Fall zu sein, denn anstatt direkte Kinder versuchen zu passen, alles, was Sie interessiert, ist, dass es ein Nachkomme ist. Dazu gehören Kind wie der erste Schnipsel, Enkel wie der zweite Schnipsel, Urenkel und so weiter. Oder, mit anderen Worten, würde .outer .inner sogar die <input> in diesem Match:

<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> 

Wenn Sie will nur Selektoren Kind verwenden, um dorthin zu gelangen, würden Sie .outer > .what > .in > .the > .world > form > .inner zumindest verwenden.