1

我目前正在 jQuery 中做我的第一步，并且在.remove(). 已经有很多有类似问题的人提出了问题，但他们没有帮助我。

在 HTML 文件中，我有一个表单和以下内容div，用作警报框并显示表单是否正确验证。在其原始状态中，div包含一个用于关闭它的按钮。

<div id="my-form-alert-box">
    <button id="my-form-alert-button" type="button" class="close">x</button>
</div>

首次加载 HTML 页面时，不应显示警告框。这就是我添加以下 CSS 的原因：

<style type="text/css">
    #my-form-alert-box {display: none;}
</style>

当表单被提交和验证时，我附加<p>some text</p>到这个div，然后显示警告框。当我使用按钮关闭警报框时，它会消失但<p>some text</p>不会被删除。为什么会这样？

这是我的 jQuery 代码：

$(document).ready(function() {

    var $myFormAlertBox = $('#my-form-alert-box');
    var $myFormAlertBoxParagraph = $('#my-form-alert-box p');

    $('#my-form-alert-button').on('click', function(event) {

        $myFormAlertBoxParagraph.remove();
        $myFormAlertBox.hide();

    });

    $('#my-form').on('submit', function(event) {

        $.ajax({
            // ...
            success: function(data) {

                // The content of the alert box should be removed
                // and the alert box itself should be hidden also when
                // the form gets submitted again and not only when the
                // button is clicked
                $myFormAlertBoxParagraph.remove();
                $myFormAlertBox.hide();

                // data contains <p>some text</p>
                $myFormAlertBox.append(data).show(); 
            }

        });

        event.preventDefault();

    });        

});

附加数据工作正常，但删除它不会。你能帮助我吗？非常感谢你！

4

3 回答 3

2

我认为您的选择器在您更新内容之前正在运行。选择器只有在最初运行时才能看到其中的内容。

于 2012-11-21T20:36:01.067 回答
1

您对 $myFormAlertBoxParagraph 的初始分配将失败，因为在调用它时您的标记中没有段落。在您的标记中添加一个“占位符”段落应该可以解决它。这解释了为什么 .remove() 会失败。

对于您的 ajax，请尝试这样的操作来保持分配给变量的新值：

//...
$.ajax({
    // ...
    success: function(data) {
        // Remove the existing paragraph.
        $myFormAlertBoxParagraph.remove();

        // This updates the paragraph object with the new one.
        $myFormAlertBoxParagraph = $(data);

        // Add the new paragraph and ensure the alert box is visible.
        $myFormAlertBox.append($myFormAlertBoxParagraph).show();
    }
});
//...

这将从警告框中删除段落标记，并添加新的。无需 .hide() 它，然后立即 .show() 它。但是，如果单击事件将其隐藏，则在 .append() 之后添加 .show() 将覆盖您。

于 2012-11-21T20:25:54.470 回答
1

jQuery 对象不存在。在附加<p>. 所以这个对象是空的，并且“永远”是空的，因为你永远不会重新分配它。

于 2012-11-21T20:35:54.883 回答