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

Posted 2023-05-09

【中文标题】附加代码以形成成功消息的脚本将图像放在消息 DIV 之外

【英文标题】：Script to append code to form success message is placing image outside of message DIV

【发布时间】：2012-01-19 10:46:27

【问题描述】：

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

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

$.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 之外以及为什么它不会从成功消息中关闭表单吗？

谢谢，

尼克

【参考方案1】：

我刚刚在您链接到的网站上对其进行了测试。关闭按钮实际上不在 div 之外，它只是出现在您希望它显示的区域下方。那是因为包装 <p> 的高度为 0。它的高度为 0，因为您正在浮动它内容（<a> 标签）。只需将<p> 的高度设为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;
        );
      );    
    );
  
);

【讨论】：

@maxedision 谢谢，更改为段落添加高度可以正常工作，但是按照您的建议添加$('.close').click(...) 后，关闭按钮仍然没有关闭面板

你说得对，我已经更新了代码，它现在应该可以工作了。这是您应该了解的 javascript 基础知识。您不能将事件绑定到尚不存在的元素。这基本上就是你正在做的事情（这就是我的代码的第一个版本正在做的事情）。这也是为什么您通常会看到所有内容都包含在 $(document).ready() 中的原因——它是为了防止代码在所有页面元素创建完成之前运行。

此外，这里的其他人建议您使用 jQuery 的 .live() 方法，但您应该知道，现在已弃用该方法，取而代之的是新的 .on() 方法。但是，我还没有遇到应该在哪里使用这些方法的示例。虽然您可能不会在小型 Web 应用程序中注意到它，但它们是非常低效的方法。最好的方法是做我在这里所做的——在创建元素之后，将事件绑定到它。

【参考方案2】：

这是一个快速的 jsFiddle

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

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

【讨论】：

感谢 William，修复了面板 DIV 的关闭问题

【参考方案3】：

我在这里放了一个例子（有变化）：http://jsfiddle.net/MarkSchultheiss/bUWh4/

不是很漂亮，但你应该能够提取你需要的东西，并且点击按钮通过更改为 .on() 来工作

【参考方案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);
    
);

当然，除非您确实打算让事物逐渐淡化。希望这会有所帮助！

【讨论】：

谢谢，菲尔。我尝试使用你清理过的 ajax 代码，但它破坏了我表单上的脚本，所以看起来有些不对劲。

看来我错过了成功功能的关闭。我会更新答案。