#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
Я загружаю div с внешней страницы с помощью .load(), и с ним все работает хорошо, это код jquery (он включен во все страницы, поэтому не отсутствуют файлы .js):
<script>
$(document).ready(function() {
$( " #window " ).click(function() {
$('.loadiv').fadeIn("fast");
$('.loadiv').load($(this).attr("href") " .windows-wrapper");
$('#blackout').fadeIn("fast");
$('#close').fadeIn("fast");
return false;
});
$("#close").click(function() {
$('.windows-wrapper').fadeOut("fast");
$('#blackout').fadeOut("fast");
$('#close').fadeOut("fast");
});
$("#blackout").click(function() {
$('.windows-wrapper').fadeOut("fast");
$('#blackout').fadeOut("fast");
$('#close').fadeOut("fast");
});
//change css properties from parent divs
$(' #child').focus(function(){
$(this).parent().css( "border", "3px solid #4ec5da" );
});
$(' #child').blur(function(){
$(this).parent().css( "border", "3px solid #D5D5D5" );
});
});
</script>
но этот последний фрагмент кода, который позволяет мне изменять некоторые свойства css, не работает, когда я вызываю div с другой страницы с помощью .load(), но если я перехожу непосредственно на страницу, код работает хорошо.
//change css properties from parent divs
$(' #child').focus(function(){
$(this).parent().css( "border", "3px solid #4ec5da" );
});
$(' #child').blur(function(){
$(this).parent().css( "border", "3px solid #D5D5D5" );
});
});
Я не знаю, в чем может быть проблема, я был бы очень благодарен, если вы поможете мне разобраться. наконец, это способ, который я использую для вызова функций.
<a id="window" href="register.php">Registro</a>
Комментарии:
1. Какие-либо ошибки в консоли? Попробуйте использовать jQuery вместо $.
Ответ №1:
Обработчики событий привязаны только к текущим выбранным элементам; они должны существовать на странице в то время, когда ваш код выполняет вызов привязки события.
Вам нужно использовать делегирование событий. Вы должны использовать .on() с использованием подхода делегированных событий.
Используйте
//change css properties from parent divs
$('.loadiv').on('focus', '#child', function () {
$(this).parent().css("border", "3px solid #4ec5da");
});
$('.loadiv').on('blur', '#child', function () {
$(this).parent().css("border", "3px solid #D5D5D5");
});
Комментарии:
1. Гениально, я использую это и отлично работает при загрузке с .load, но перестает работать, когда я использую страницу напрямую… поэтому я полагаю, что я буду использовать ваш код для .load и старый код тоже для прямого доступа (или у вас есть идея получше?). в любом случае спасибо.
2. @user3777499, Используй
document
вместо'.loadiv'
этого, это будет работать в обоих темпах