Измененный идентификатор не найден jQuery

Трудно придумать заголовок для этого вопроса.Измененный идентификатор не найден jQuery

Подробнее для доказательства концепции, мне интересно, почему это не работает. То, что я пытаюсь сделать, это использовать событие jquery для изменения атрибута идентификатора, а затем использовать другое событие jquery, связанное с этим новым измененным идентификатором.

Например:

<?php 
echo <<<END 
<html> 
<head> 
<style> 
#before { 
    color:maroon; 
} 
#after { 
    color:blue; 
} 
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<title>Test</title> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#before").hover(function() { 
     $(this).attr("id","after"); 
    }); 

    $("#after").click(function() { 
     alert("Handler for .click() called."); 
    }); 
}); 
</script> 
</head> 
<body> 
<p id="before">TEST TEXT</p> 
</body> 
</html> 
END; 
?>

При наведении курсора над моим тестовым текстом, цвет меняется от темно-бордового до синего, как и ожидался. Я понимаю, что текст теперь будет иметь идентификатор «после», и при нажатии будет применена функция обработчика события клика. Однако это не тот случай, когда быстрый обработчик событий и связанное с ним предупреждение не отображаются.

Я новичок в jquery, возможно, есть функция обработчиков обновлений, которую я пропускаю?

источник

2014-10-10 lowcrawler

вы не можете сделать это, так как селекторы вычисляются только на дом, готовый в вашем случае ... вам нужно использовать делегирование событий ... и я бы рекомендовал c зависание атрибута типа класса, чем изменение идентификатора –

Вы предлагаете, чтобы это работало вне документа. Или вы эффективно говорите, что взаимодействие с элементом после изменения его идентификатора невозможно? Есть ли способ заставить обновление DOM? – lowcrawler

, обозначая его как повторяющийся, поскольку эта же концепция применяется и здесь ... поскольку селектор изменяется во время выполнения - http://jsfiddle.net/arunpjohny/6k2aemzu/1/ –

Он работает по тому же принципу, что и Event binding on dynamically created elements?.

Когда вы добавляете обработчик события к элементу, где элемент находится с помощью селектора, селектор выполняется только один раз, когда код выполняется после того, как обработчик добавляется к элементу. Когда-то произошло, если вы измените значения селектора, связанные с элементом, они не отразятся в прикрепленных обработчиках.

Например, в вашем случае вы добавляете обработчик к элементу с id before в обработчике dom, поэтому после того, как будет запущено событие dom, ваш селектор будет оценен и он вернет один элемент, к которому вы добавляете обработчик. В том же самом обработчике dom вы пытаетесь добавить обработчик клика к элементу с id after, но в dom ready нет элементов с этим идентификатором, чтобы обработчик не был прикреплен к какому-либо элементу.

Теперь вы меняете идентификатор элемента, но он не повлияет на уже прикрепленный обработчик и не добавит новый обработчик.

Решение заключается в использовании механизма, известного как event delegation.

Демо:

$(document).ready(function() { 
 
    //there is no need to use hover as your want to add the class when the mouse enter the element and you don't want to do anything in mouseleave 
 
    $("#mytarget").mouseenter(function() { 
 
    $(this).addClass("after").removeClass('before'); 
 
    }); 
 

 
    //look at the use of event delegation 
 
    $(document).on('click', '.after', function() { 
 
    alert("Handler for .click() called."); 
 
    }) 
 
});

.before { 
 
    color: maroon; 
 
} 
 
.after { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p id="mytarget" class="before">TEST TEXT</p>

источник

2014-10-10 03:27:46

Я также хотел бы отметить, что, как представляется, более дружелюбные методы, связанные с изменением классов. Например, http://jsfiddle.net/arunpjohny/6k2aemzu/1/ – lowcrawler

@lowcrawler обновлял демоверсию .... с некоторыми дополнительными комментариями –

Вы можете запустить событие щелчка после этого события парения

$(document).ready(function(){ 
$("#before").hover(function() { 
    $(this).attr("id","after"); 
    $("#after").click(function() { 
    alert("Handler for .click() called."); 
}); 
    return false; 
}); 
});

источник

2014-10-10 03:40:44 wfy

вы можете предоставить некоторые пояснения к OP для ясности ... – webeno

Измененный идентификатор не найден jQuery

ответ

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