jQuery: Вставка HTML в перетаскиваемый div с .prepend() - как использовать событие click в этом HTML-элементе?

Question

Следующий вопрос: У меня есть скрытый контейнер div, называемый «скрытым от окна». Когда пользователь нажимает на ссылку, HTML связанного документа должен быть вставлен в этот контейнер div с помощью AJAX (работает до сих пор). Этот контейнер также должен быть перетаскиваемым (работает до сих пор). Но дополнительно мне нужна кнопка закрытия скрыть Div контейнер снова - и здесь возникает проблема

Мой код:.

$('.top_navigation .address a').click(function() { 
    var myUrl = SOME CODE TO GET THE URL - WORKING; 
    $('#window-hidden').load(myUrl, function() { 
    var closer = '<div id="closer"><a href="#">X</a></div>'; 
    $(this).prepend(closer); 
    $(this).fadeIn(); 
    }); 
    return false; 
}); 

$('#window-hidden').draggable(); 

$('#closer a').on('click', function() { 
    $('#window-hidden').fadeOut(); 

}); 

Первый блок кода загружает HTML в контейнер сНу, а также он добавляет «ближе» элемент в в контейнере все хорошо. Второй блок заставляет контейнер перетаскивать. И с последним блоком кода я хотел снова закрыть окно, но он не работает. Возможно, это потому, что родительский контейнер (скрытый от окна) это draggab ле? Или, может быть, это потому, что элемент #closer вставлен после создания DOM ??

Беста, Tobias

Answer 1

click событие работает только на элементах, которые существуют в DOM в документе готового. Вам нужно использовать либо on (если вы используете jQuery 1.7+), либо delegate (для более ранних версий jQuery), чтобы добиться того, что вам нужно. Попробуйте любой из них в зависимости от версии:

on:

$("#window-hidden").on("click", "#closer a", function() { 
    $('#window-hidden').fadeOut(); 
}); 

delegate:

$("#window-hidden").delegate("#closer a", "click", function() { 
    $('#window-hidden').fadeOut(); 
}); 

Answer 2

Для прослушивания событий на DOM элементов, вставленных после загрузки страницы , вам нужно использовать метод on. В этом случае было бы что-то вроде:

$('#window-hidden').on('click', '#closer a', function() { 
    $('#window-hidden').fadeOut(); 
}); 

Для получения дополнительной информации см: http://api.jquery.com/on/

Answer 3

Я думаю, проблема в том, что этот код здесь

$('#closer a').on('click', function() { 
    $('#window-hidden').fadeOut(); 

}); 

выполняется при загрузке страницы, но «ближе» div вставляется в DOM при нажатии ссылки. Поэтому в тот момент, когда вы пытаетесь привязать обработчик кликов к «ближе» div, он еще не существует. Можете ли вы попробовать разместить привязку события в обработчике кликов? Просто копировать вещи вокруг, это будет выглядеть следующим образом:

$('.top_navigation .address a').click(function() { 
    var myUrl = SOME CODE TO GET THE URL - WORKING; 
    $('#window-hidden').load(myUrl, function() { 
    var closer = '<div id="closer"><a href="#">X</a></div>'; 
    $(this).prepend(closer); 

    $('#closer a').on('click', function() { 
     $('#window-hidden').fadeOut(); 
    }); 

    $(this).fadeIn(); 
    }); 
    return false; 
}); 

$('#window-hidden').draggable(); 

Cheers, Алекс