フォームを追加するときにJSが機能しなくなる

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

をそして、私は、HTMLのFORMを追加する場合：このコードは正常に動作している

<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 doesntの仕事はもう、コメントボックスがクローズアップしません。これを修正するには？それはうまく動作しません<form></form>

Answer 1

セレクタ.panel-google-plus-comment > .panel-google-plus-textareaは内部のフォームがなくても正しく通過しますが、失敗しているのは確かです。 inner要素はouter要素の直接の子であるため、最初のスニペットで

<!-- 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マッチ：下の2つのスニペットを考えます。 2番目のセレクタ.outer > .innerはinnerがhelloの子であり、outerのものではないので、はではありません。代わりに.outer > .hello > .innerは一致します。helloはouterの子であり、innerはhelloの子です。あなたが.outer .innerを使用した場合に代わりに直接の子に一致するようにしようと、あなたが気にすべてが、それは子孫だということですので、

さて、それはは、いずれの場合に問題にならないでしょう。これには、最初のスニペットのような子供、2番目のスニペットのような孫、曾孫、などが含まれます。または、他の言葉で、.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を使用する必要があると思います。