jquery - 错误/成功消息警报不会在第二次 ajax 调用中显示，而无需在 jquery 中再次刷新页面

Question

这是模式中提交/发送按钮的点击事件，当我单击发送按钮时，如果电子邮件字段为空，它会显示错误请输入有效的电子邮件。如果电子邮件字段不为空且电子邮件有效，则会显示电子邮件已发送给您的 friend 。之后的成功消息向该电子邮件发送电子邮件并由于 setTimeout 函数而关闭模式，但是当我再次打开该模式并单击发送按钮时，即使发送了电子邮件，它也不会显示任何错误消息或成功消息。我必须刷新页面才能使其再次工作。我的代码有什么问题？

$('#send-book').on('click', function() {
     $.ajax({
       url: 'index.php?route=account/books/shareWithFriends',
       type: 'post',
       data: 'emails=' + $("#friends-emails").val() +'&booklink=' + $("#sharedBookUrl").val(),
       dataType: 'json',
     beforeSend: function() {
       $('#send-book').button('loading');
     },
     success: function(json) {
       var newDta = JSON.stringify(json);
       var msg = '';
       if (json['error']) {
        msg = "<div class='alert alert-danger'>" +
             "<strong>ERROR!</strong> " +
             json['error'] +
             "<button type='button' class='close' data-dismiss='alert'>×</button>" +
             "</div>";
       }
       if (json['success']) {
         msg = "<div class='alert alert-success'>" +
               "<strong>Success!</strong> " +
               json['success'] +
               "<button type='button' class='close' data-dismiss='alert'>×</button>" +
               "</div>";
       }
       $('#book-shared-message').html(msg);
       setTimeout(function() {
          $("#book-shared-message").hide();
          $('#tellYourFriendModel').modal('hide');
       }, 3000);
       $('#friends-emails').val('');
       $('#send-book').button('reset');
     }
   });
});

更新:

/* code to handle show modal popup for tell your friend */
    $('a[id^="tellYourFriend-"]').on('click', function(e) {
        e.preventDefault();
        var currentThis = $(this);
        var book_url = currentThis.attr('data-book_url');
        $('#sharedBookUrl').val(book_url);
        //$('#book-shared-message').html('');
        $('#tellYourFriendModel').modal('show');
    });

Answer 1

您的代码在 #book-shared-message 元素上调用 .hide()，但它从不调用 .show() 来再次显示。因此，当您使用 .html(msg) 为其填充新值时，它仍然是不可见的。您可能应该在每次显示它时调用 .show()。

类似地，您调用 $('#tellYourFriendModel').modal('hide'); 这似乎是隐藏模态叠加层的东西，但不应该有某种对应的.modal('show') 调用？我不熟悉这个插件，所以无法向您提供具体信息，但它看起来确实很可疑。

顺便说一句，您可以通过使用任何浏览器中的开发人员工具中的 DOM 检查器自行解决这一问题。如果您在第二次提交后检查 DOM 元素，您会发现其中一些元素是隐藏的。