在使用其他单击事件后,jQuery单击事件未触发

时间:2013-07-29 03:37:50

标签: javascript jquery html slidedown slideup

我完全迷失在这里,我不知道为什么会这样。

我在.js文件中有以下代码:

$( document ).ready(function() {
    showMessage();
    $( '#message' ).slideDown( 'fast' );

    //Hide Message//
    $( '#m_close' ).click(function( event ) {
        $( '#message' ).slideUp( 'fast' );
    });
    //---//
    $( '#m_button' ).click(function( event ) {
    showMessage();
    $( '#message' ).slideDown( 'fast' );
    });
});

现在,创建消息div并在页面首次加载时完全向下滑动。当我按#m_close时,div完美滑动。但是,如果我按#m_button,消息将向下滑动并显示所有正确的信息,但按#m_close绝对不会。我在开发控制台中没有错误,似乎没有出错,它只是拒绝工作。我向#m_close添加了一个slideDown,以便它关闭然后重新打开,并且它会这样做,并且#m_close将无限运行,直到按下#m_button。

发生了什么事?

编辑:我的HTML请求:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="includes/style.1.css" rel="stylesheet" type="text/css" />
    <script src="includes/jquery.js"></script>
</head>
<body>
    <div id="message">

    </div>
    <button id="m_button">Message</button>
    <script src="includes/functions.js"></script>
</body>

1 个答案:

答案 0 :(得分:2)

看起来邮件是动态加载的,m_close可能会使用message方法添加到showMessage()元素。

所以试试

$( document ).ready(function() {
    showMessage();
    $( '#message' ).slideDown( 'fast' );

    //Hide Message//
    $( '#message' ).on('click', '#m_close', function( event ) {
        $( '#message' ).slideUp( 'fast' );
    });
    //---//
    $( '#m_button' ).click(function( event ) {
        showMessage();
        $( '#message' ).slideDown( 'fast' );
    });
});

当您使用click注册click事件处理程序时,它会将处理程序仅注册到当时dom中存在的那些元素。当您再次致电showMessage时,现有的m_close将被删除,并且会创建一个新的,因此click处理程序不再附加到新元素。这里的解决方案是使用如上所示的事件委托