divを提出するとdivが表示され、「行」クラスのdivが存在する場合

Question

これがこのスクリプトを作成する最も効率的な方法であるかどうか教えていただけますか？それはjsfiddleに追加するときに機能しますが、私のサイトでは問題があります。 submitをクリックしたときにクラス "行"を持つdivが存在する場合、クラス "nores"でdivを非表示にしたい

$('h2').append('<br /><div class="nores">no results found</div>'); 
 
$('#submit').on('click', function(nor){ 
 
    if ($('.row').length > 0) { 
 
    $('.nores').hide(); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 

 

 
<input name="submit" id="submit" value="Search" type="submit"> 
 
<h2> 
 
search results 
 
</h2> 
 

 
<div class="row"> 
 
some text 
 
</div>

Answer 1

あなたの問題は少し不明であるが、私は解決策がそこにあると思う：

• それがされることを確認するために$(document).ready(function() {});か$(function() {});であなたのコードをカプセル化DOMの準備ができたら実行されます。

• イベントの委任を使用してバブリングを利用します。これは、リスナーの予期しない問題を避けるための良い習慣です。インスピレーションが必要な場合は、次の記事を読むことができます。https://learn.jquery.com/events/event-delegation/

• モジュールを使用してJavaScriptコードを整理します。そうしないと、あなたが最も可能性が高いため、グローバルスコープの混乱の競合を持っています...あなたはAMDやCommonJSを気にしたくない場合は、単にこのようなあなたのコードをリファクタリングすることができます

  var module = { 
      init: function() { 
      module.listeners(); 
      }, 
      listeners: function() { 
      $('#submit').on('click', module.submit); 
      }, 
      submit: function() { 
      if ($('.row').length > 0) { 
       $('.nores').hide(); 
      } 
      } 
  }; 
  
  $(document).ready(module.init);