使用不同的单击事件后，jQuery单击事件未触发答案

【问题标题】：jQuery click event not firing after a different click event has been used使用不同的单击事件后，jQuery单击事件未触发
【发布时间】：2013-07-29 03:37:50
【问题描述】：

我完全迷失了，我不知道为什么会这样。

我在 .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>

【问题讨论】：

可以添加你的 HTML 和 showMessage() 吗？还是一个jsfiddle？
我添加到我原来的帖子中。
是m_close 动态添加到页面
是的，它是在showMessage函数中创建的。

标签： javascript jquery html slidedown slideup

【解决方案1】：

看起来消息是动态加载的，m_close 可能会使用showMessage() 方法添加到message 元素中。

所以试试

$( 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 注册点击事件处理程序时，它只会将处理程序注册到当时存在于 dom 中的那些元素。当您再次调用showMessage 时，现有的m_close 将被删除并创建一个新的click 处理程序不再附加到新元素。这里的解决方案是使用如上所示的事件委托

【讨论】：

是的，有效，但为什么呢？动态生成与它有什么关系？它在文档就绪时（动态）生成一次，那么为什么在点击事件中生成它时不起作用？