jQuery hide() 不隐藏父级

Question

JQuery 仍然让我抓狂...... 问题是这样的:我有一个页面，访问者可以通过单击 div (id="contact") 内的链接来留下他们的电子邮件地址。

<div id="contact"><a href="">vuoi lasciare un recapito?</a></div>

单击后，“联系人”div 会加载一个 PHP 表单。用户输入他的电子邮件地址，然后检查该地址，然后将其插入数据库等......通常的业务。

$(document).ready(function() {
$('#contact a').click(function()
    {
    $('#contact').load('mailform.php');
    return false;
    });
$('#contact').submit(function(){
    var email = $('input[name=email]', '#submitmail').val();
    var submit = $('input[name=submit]', '#submitmail').val();
    $('#contact').load('mailform.php',{'email': email,'submit': submit});
    return false;
    });
//the close button - start
$(".cls").click(function(){
    alert($(this).parent().html());
    $(this).parent().hide();
    });
//the close button - end
});

当我想添加“关闭”按钮或链接时，痛苦就来了，这样用户就可以在填写表单之后甚至之前隐藏表单。

<div id="submitmail">
    <form action="#" method="post">
        <fieldset>
        <p><label for="email"><?php echo $_SESSION['nome']; ?></label><input type="text" name="email" /></p>
        <p class="submit"><input type="submit" name="submit" value="inserisci" /></p>
        </fieldset>
        </form>
</div>
<span class="cls">Chiudi</span>

链接(和“关闭按钮”脚本)根本不起作用。没有警报，没有开关，div 没有消失……什么都没有。 已经尝试过 $('span.cls').click(function() 和 $('#cls').click(function() (切换“span”后“带有“div”和带有 ID 的类)没有任何线索。只是一个单击的链接，什么也不做。Firebug 和 IE 开发工具栏甚至无法进入该功能。 欢迎替代解决方案...

谢谢!

Answer 1

试试这个:

$("#contact").on("click", ".cls", function(){
    alert($(this).parent().html());
    $(this).parent().hide();
});

由于 .cls 元素在绑定(bind)时不存在 - 因此您需要将处理程序委托(delegate)给合适的父元素。阅读本文的“直接事件和委托(delegate)事件”部分:

http://api.jquery.com/on/

摘自上述链接:

If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler...