附加代码以形成成功消息的脚本将图像放置在消息 DIV 之外

Question

我正在使用 ajax 脚本在成功消息中生成文本。该过程的最后一部分是添加一个关闭图像 DIV，单击它时应关闭（向上滑动）包含表单和成功消息的“面板”DIV，就像单击关闭图像而不发送任何消息时发生的情况一样。您可以通过点击此页面上导航栏中的“联系人”来查看该表单。

这是生成成功消息的脚本：

$.ajax({
         type: "POST",
         url: "contact-engine.php",
         data: dataString,
         success: function() {
           $('#contact-form').html("<div id='message-form'></div>");
           $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
           .hide()
           .fadeIn(2000, function() {
             $('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>').appendTo('#message-form').hide().fadeIn(2000, function() {
             $('<p style="text-align:center"><a class="close" href="#"><img src="/images/close.png"></a></p>').appendTo('#message-form').hide().fadeIn(2000);
             });
           });
         }
       });

这是处理关闭按钮 DIV 上的单击功能的脚本：

$(".close").click(function ()
        {
            $("#panel").slideUp("slow");
            $("li#contact").removeClass("current");
    //        $("#contact").removeClass("current");
            $panel.visible = false;
            return false;
        });

有人可以让我知道为什么关闭按钮位于 DIV 之外以及为什么它不会从以下位置关闭表单吗？成功消息？

谢谢，

尼克

Answer 1

我刚刚在您链接到的网站上测试了它。关闭按钮实际上并不在 div 之外，它只是出现在您希望其显示的区域下方。这是因为包装

的高度为 0。并且它有一个高度为 0，因为您正在浮动其内容（ 标记）。只需给

高度为 35px 就可以了：

$('<p style="text-align:center; height:35px"><a class="close" href="#"><img src="/images/close.png"></a></p>')

我猜点击处理程序不会触发，因为 .当您尝试绑定 click 事件时，相关的 close 元素不存在。只需将所有 $('.close').click(...) 代码放在创建 .close 元素的行后面即可：

$.ajax({
  type: "POST",
  url: "contact-engine.php",
  data: dataString,
  success: function() {
    $('#contact-form').html("<div id='message-form'></div>");
    $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
    .hide()
    .fadeIn(2000, function() {
      $('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>').appendTo('#message-form').hide().fadeIn(2000, function() {
        $('<p style="text-align:center"><a class="close" href="#"><img src="/images/close.png"></a></p>').appendTo('#message-form').hide().fadeIn(2000);
        $(".close").click(function () {
          $("#panel").slideUp("slow");
          $("li#contact").removeClass("current");
          //$("#contact").removeClass("current");
          $panel.visible = false;
          return false;
        });
      });    
    });
  }
});

Answer 2

这是一个快速的 jsFiddle

http://jsfiddle.net/MRaeq/3/

您添加的所有内容似乎正确的。但是单击事件看起来可能需要在创建关闭按钮后添加实时处理程序，除非您已经处理过它

Answer 3

我在这里放了一个示例（有更改）： http://jsfiddle.net/MarkSchultheiss/bUWh4/

不太漂亮，但您应该能够提取您需要的内容，并且单击按钮可以通过更改为 .on() 来工作

Answer 4

您的问题是 $(".close").click(function() { ... }) 方法仅绑定 DOM 中当前存在的选定元素。您将不得不使用其他一些方法，例如：

$('#message-form').on("click", ".close", function() {
    $("#panel").slideUp("slow");
    $("li#contact").removeClass("current");
    // $("#contact").removeClass("current");
    $panel.visible = false;
    return false;
});

至于 div 外部的关闭按钮，我不太确定您指的是哪个 div 以及您所看到的确切内容。我建议按如下方式清理您的 AJAX：

$.ajax({
    type: "POST",
    url: "contact-engine.php",
    data: dataString,
    success: function() {
        $('#contact-form').html("<div id='message-form'></div>");
        $('#message-form')
            .hide()
            .html("<h3>Your message has been submitted successfully!</h3>")
            .append('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>')
            .append('<p style="text-align:center"><a class="close" href="#"><img src="/images/close.png"></a></p>')
            .fadeIn(2000);
    }
});

当然，除非您确实打算让事情逐渐淡出。希望这有帮助！