如果单击提交并且存在具有类 "row"的 div，则隐藏 div

Question

你介意告诉我这是否是编写此脚本的最有效方法吗？当我将其添加到 jsfiddle 但在我的网站上遇到问题时，它可以工作。如果单击提交时存在带有类"行"的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);