javascript - 事件仅触发一次

Question

我有一个脚本来检查一个值，如果它等于“”，则会向用户显示一条消息。这工作正常。但我的代码似乎有两个问题。

首先，当我第一次运行代码时，它工作正常。但如果我再次运行它，什么也不会发生。我必须刷新页面才能再次运行。

其次，我的按钮是类型提交，即使我有 e.preventDefault();在代码中，它提交了，但它不应该这样做。

如果有人能指出我的错误并帮助我继续前进，我将不胜感激。非常感谢

html
<button type="submit" id="retrieve" class="btn btn-primary">Retrieve</button>


$("#USRboxrtv").submit(function(e) {
      e.preventDefault();

      var activity = $("#user").val();
      var service = $("#activityRadios").val();
      var dept = $("#rtvdept").val();

      if (dept == "") {
        $("#deptmessage").html('You must enter a department').css({
          'color': 'red',
          'font-size': '14px'
        }).fadeOut(2000);

        return false;
      }

      var data = $("#USRboxrtv").serialize();
      $.ajax({
        type: "POST",
        url: "/lstor/users/requests/boxes/retrieve/brtv.php",
        data: data,
        success: function(data) {
          {
            $('.message').html(data).fadeIn(3000).fadeOut(3000);
            $("#USRboxrtv").get(0).reset();
            $("#box_rtv").load("refreshBox.php");
            $("#rtvdept").trigger("chosen:updated");
            $("#address").trigger("chosen:updated");
            $("#box_rtv_chosen").find('option:selected').remove();
            $("#box_rtv").html('');
            $("#box_rtv").trigger("chosen:updated");
          }
        }
      });
    });

Answer 1

一旦你调用函数fadeOut() ，该元素将被隐藏，直到您再次显示它。所以你需要调用函数show()在淡出之前。

请参阅以下内容:

$("#retrieve").ready(function(){

  $("#USRboxrtv").submit(function(e) {
      e.preventDefault();
      $("#deptmessage").html('You must enter a department').css({
        'color': 'red',
        'font-size': '14px'
      }).show().fadeOut(2000);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="deptmessage">

</div>
<form id="USRboxrtv">
  <button type="submit" id="retrieve" class="btn btn-primary">Retrieve</button>
</form>