2013-07-29 2 views
1

Я полностью потерялся здесь, я понятия не имею, почему это происходит.Событие jQuery click не срабатывает после того, как было использовано другое событие клика

У меня есть следующий код в .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 абсолютно ничего не делает. Я не вижу ошибок в консоли dev, ничего похожего не получается, он просто отказывается работать. Я добавил slideDown в #m_close, чтобы он закрывался, затем снова открывался, и он делает это, а #m_close будет работать бесконечно, пока не будет нажата кнопка #m_button.

Что происходит?

EDIT: мой 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> 

+0

Можете добавить свой HTML и showMessage()? или jsfiddle? –

+0

Я добавил в мой первоначальный пост. – sharf

+0

динамически добавляется 'm_close' на страницу –

ответ

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 зарегистрировать обработчик события клика, это зарегистрировать обработчик только те элементы, которые существуют в йот в данный момент. когда вы вызываете showMessage снова существующий m_close удаляется, и создается новый, поэтому обработчик click больше не привязан к новому элементу. Решением здесь является использование делегирования событий, как показано выше.

+0

Да, это сработало, но почему? что с ней связано динамическое поколение? Он генерируется (динамически) один раз в документе, и почему он не работает, когда он генерируется в событии клика? – sharf

Смежные вопросы