Question

我有一个小问题，关于我提交的ajax表单（成功）。

我遵循了教程（http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/），它提交的表单只是一个标准的联系表单。然而我的是通过表单发送消息，因此我想向用户显示消息，然后让用户能够在点击时删除消息。

表单发送消息。
用户收到反馈（ajax）
如何在显示div之后删除它？

HTML

<div class="module send-message" id="send-message">
                    <form name="send" class="pure-form pure-form-stacked">
                        <fieldset>

                        <label for="recipient" id="recipient_label">Your recipient(s):</label>
                        <input type="text" name="recipient" id="recipient" class="pure-input-1 input-tags"></input>                     
                        <label class="error" id="recipient_error" for="recipient">This field is required.</label>  

                        <label for="message">Your message:</label>
                        <textarea name="message" maxLength="120" rows="4" class="pure-input-1" id="message"></textarea>
                        <label class="error" for="message" id="message_error">This field is required.</label>  

                        <p id="counter" style="margin-bottom: 25px;"><span>0</span> characters of 120</p>

                        <input type="submit" name="submit" id="submit_btn" class="button btn-large btn-warning" value="Pipit"></input>
                        </fieldset>

                    </form>
                </div>

JS / Jquery的：

var dataString = 'recipient='+ recipient + '&message=' + message + '&terms=' + terms;  
    //alert (dataString);return false;  
    $.ajax({  
      type: "POST",  
      url: "process.php",  
      data: dataString,  
      success: function() {  
        $('#send-message').html("<div id='feedback'></div>");  
        $('#feedback').html("<h2>Your message has been sent!</h2>")  
        .append("<p>Click anywhere to hide this message.</p>")  
        .hide()  
        .fadeIn();  
      }  
    });  
    return false;     
  });  
});

::更新:: 感谢这个梦幻般的网站上的一些人，我得到了它的工作！

但是，有两个小缺陷：

我希望刷新表单（从中删除所有数据）。
当第一次显示反馈消息时，它会像它应该的那样消失。但是，当我重新提交表单时，反馈表将停留在底部。

这可以帮助吗？

非常感谢你！

Answer 1

这样的事情对你有用：

更改此行代码：

$('#send-message').html("<div id='feedback'></div>");

为：

$('#send-message').html("<div id='feedback' onclick='hideMe()'></div>");

然后添加：

var hideMe = function () {
    $("#feedback").hide();
}

如果你只想隐藏它。如果要完全删除它，请使用.remove（）而不是.hide（）;

var hideMe = function () {
    $("#feedback").remove();
}

Answer 2

我会这样做，点击后先淡出然后将它从dom中完全删除。

var dataString = 'recipient='+ recipient + '&message=' + message + '&terms=' + terms;  
    //alert (dataString);return false;  
    $.ajax({  
      type: "POST",  
      url: "process.php",  
      data: dataString,  
      success: function() {  
        $('#send-message').html("<div id='feedback'></div>");  
        var $feedback = $('#feedback');
        $feedback.html("<h2>Your message has been sent!</h2>").append("<p>Click anywhere to hide this message.</p>");
        $feedback.on("click", function () {
               $(this).fadeOut(function () {
                     $(this).remove();
               });
            });              
        $feedback.fadeIn();  
      }  
    });  
    return false;     
  });  
});

Answer 3

您可以将点击功能附加到div，如下所示：

$('#feedback').html("<h2>Your message has been sent!</h2>")  
        .append("<p>Click anywhere to hide this message.</p>")  
        .hide()  
        .fadeIn()
        .click(function(){    
            // Hide the div and remove it
            $(this).fadeOut(function(){
                $(this).remove();
            });
        )};

或者，如果您只想自动隐藏消息，可以使用jQuery delay()功能或仅使用setTimeout。以下是您使用delay()函数的方法：

$('#feedback').html("<h2>Your message has been sent!</h2>")  
        .append("<p>Click anywhere to hide this message.</p>")  
        .hide()  
        .fadeIn()
        .delay(1000)
        .fadeOut();

或者这是使用setTimeout功能的示例：

setTimeout(function(){
    $('#feedback').hide();
}, 1000);

这里的1000与执行代码之前等待的毫秒数有关。

1000 miliseconds = 1 second

修改

好的，确保你没有替换你需要的表格，而不是像这样：

$('#send-message').append("<div id='feedback'></div>");

您还可以暂时隐藏表单，然后在用户解除反馈消息后显示该表单：

$('#send-message form').hide(); // Add show form to the click function .click(function(){ // Hide the div and remove it $(this).fadeOut(function(){ $(this).remove(); $('#send-message form').show(); }); )};

进一步编辑：

// Simple jQuery Plugin $.fn.clearForm = function() { $this = this; // Find inputs $this.find('input[type=text], select').val(''); $this.find('input[type=checkbox]').removeAttr('checked'); }; // Usage $('#form').clearForm();

此处示例：http://jsfiddle.net/dUQ9T/5/

Answer 4

这样的事情：

$（'＃feedback'）。on（'click'，function（）{ $（本）.hide（）; }）;

将click事件分配给您的反馈div，使其在单击时隐藏。

Answer 5

试试这个，

$('#send-message').html("<div id='feedback' onclick='$(this).hide();'></div>");

Answer 6

如果您希望为最终用户提供在文档中单击的任何位置隐藏#feedback div的可能性，您可以在文档中添加事件处理程序，并在每次调用时隐藏#feedback div发生点击事件：

// jQuery
$(document).on('click', function(){
    $('#feedback').hide();

    // to show the form again
    $('#formID').show();
}); 

// no jQuery
document.addEventListener('click', function() {
    document.getElementById('feedback').style.display = none;

    // show the form again
    document.getElementById('formID').style.display = block;
});

如果您希望用户在#feedback div中单击时关闭该div，只需更改侦听该点击事件的元素：

// jQuery
$('#feedback').on('click', function(){
    $(this).hide();

    // show the form
    $('#formID').show();
}); 

// no jQuery
document.getElementById('feedback').addEventListener('click', function() {
    this.style.display = none;

    // if you want to show the form
    document.getElementById('formID').style.display = block;
});

EDIT1 ：我已经更新了我的答案，一旦反馈div被隐藏，就会显示表单div。如果在收到反馈后表单div变空，您可以在脚本开头缓存for m HTML，或者在变量中复制该div并在重新显示表单时将其附加到div。

ajax提交后隐藏div

6 个答案: