添加代碼以形成成功消息的腳本是將消息放在消息外DIV

我正在使用ajax腳本在成功消息中生成文本。該過程的最後一部分是添加一個關閉圖像DIV，當點擊關閉圖像時，應該關閉（向上滑動）包含該表單和成功消息的「面板」DIV，就像在不發送任何消息時點擊關閉圖像一樣。點擊this page上的導航欄中的「聯繫人」，即可查看錶單。添加代碼以形成成功消息的腳本是將消息放在消息外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之外，爲什麼它不會關閉成功消息中的表單？

謝謝，

尼克

來源

2011-12-13 Nick

我剛在鏈接到的網站上測試過它。關閉按鈕實際上並不在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>')

我猜測，單擊處理不火，因爲有問題的.close元素，當您試圖綁定click不存在事件。只要把所有的$('.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; 
     }); 
     });  
    }); 
    } 
});

來源

2011-12-13 15:11:18 maxedison

@maxedision謝謝，改變將段落高度添加到段落中效果不錯，但是在添加'$（'。close'）。click（...）'後，您仍然沒有關閉面板，關閉按鈕 – Nick

'對，我已經更新了代碼，它現在應該可以工作。這是你應該理解的JavaScript的基礎。您不能將事件綁定到尚不存在的元素。這基本上就是你在做什麼（這是我的代碼的第一個版本正在做的）。這也是爲什麼你通常會看到'$（document）.ready（）'中包含的所有內容的原因 - 這是爲了防止代碼在所有頁面元素創建之前運行。 – maxedison

此外，這裏的其他人之一建議您使用jQuery的'.live（）'方法，但是您應該意識到現在已經不贊成使用新的.on（）方法。但是，我仍然沒有遇到應該使用這些方法的例子。雖然你可能不會注意到它在小型網絡應用程序，但它們是非常低效的方法。最好的方法是做我在這裏做的 - 元素被創建後，將事件綁定到它。 – maxedison

你的問題是，$(".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); 
    } 
});

除非你打算讓事情逐漸淡化。希望這可以幫助！

來源

2011-12-13 15:09:04

謝謝，菲爾。我試着使用你清理過的ajax代碼，但是它破壞了我的表單上的腳本，所以有些東西似乎是錯誤的。 – Nick

看起來我錯過了關閉成功函數的'}'。我會更新答案。 –

這裏是一個快速的jsfiddle

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

一切，與你加入似乎是正確的。但click事件看起來像它可能需要在這裏一旦創建了關閉按鈕，除非你已經處理它

來源

2011-12-13 15:19:17

感謝William，修復了面板DIV的關閉 – Nick

我把一個例子（有改動）要添加的現場處理程序：http://jsfiddle.net/MarkSchultheiss/bUWh4/

不是真的漂亮，但你應該能夠提取你所需要的，點擊按鈕的工作，通過改變.on（）

來源

2011-12-13 15:30:21

添加代碼以形成成功消息的腳本是將消息放在消息外DIV

回答

相關問題