양식을 추가 할 때 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 나던 작업을 더 이상 주석 상자를 닫습니다하지 않습니다. 이 문제를 해결하는 방법? 그것없이 잘 작동합니다 <form></form>

Answer 1

선택자 .panel-google-plus-comment > .panel-google-plus-textarea이 내부의 양식없이 올바르게 통과하지만 실패하기 때문에 확신합니다. inner 요소가 outer 요소의 직접적인 아이가 있기 때문에 선택을 첫 번째 조각에서 .outer > .inner 경기를

<!-- 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이 hello의 자식이기 때문에 outer이 아니기 때문에 이 아닌이 일치합니다. 대신 hello은 outer의 자식이고 inner은 hello의 자식이므로 .outer > .hello > .inner이 일치합니다.

.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를 사용해야 할 것입니다.