jQuery не распознает добавленный HTML

Question

Совершенно новичок в jQuery, так что наберитесь терпения со мной:)

Я думаю, что это должно быть быстрым: нажав кнопку .color, я добавил немного базового HTML-кода на страницу с классом .selected. Когда я наведите курсор на любой div.color с html (.selected), добавленным в него, я хочу добавить CSS к .selected, чтобы дать ему возможность навести курсор на состояние, используя

$('.color').toggle( 
    function(){
        $('.color').empty('span'),
        $(this).append("<span class='selected'></span>")
    },
    function() {
        $('.color').empty('span');
    })

$('.color').click( function(){
    $('.color').toggle;
})

$('.color').has('.selected').hover(
        function(){
            $(".color span").css('background-position', '0px -24px');
        },
        function() {
            $(".color span").css('background-position', '0px 0px');
        })

Проблема в том, что jQuery не распознает существование добавленного html. Я вручную вставил HTML, и он отлично работает, но через .append не работает.

Спасибо

РЕДАКТИРОВАТЬ: Демо здесь: http://judsoncollier.com/DEMO/

Answer 1

поскольку вы добавили class = "selected", вы можете манипулировать поведением класса, добавив этот класс в ваш CSS-файл для наведения.

.selected:hover{
//your css
} 

вам не понадобится jquery для этогоэто сэкономит вам много времени.

Answer 2

Вы можете использовать JQuery Live Event Inorder, чтобы прикрепить события к измененному HTML-контенту (которые были внедрены в DOM после запуска функции JQuery Ready). Я изменил полученный код ur и заставил его работать. *http://jsfiddle.net/zySNn/ Надеюсь, это поможет.

Answer 3

У меня были проблемы с использованием jQuery .on () в прошлом (я думаю, плюс только для jQuery версии 1.7). Попробуйте использовать метод .live () в jQuery для вашего селектора .selected следующим образом:

    $('.selected').live("mouseenter",function(){

// делать вещи });

    $('.selected').live("mouseleave",function(){

// делать вещи });

Answer 4

Когда вы вызываете методы .click() или .hover() (или .keyup() и т. Д.), JQuery назначает обработчик для любых элементов, которые соответствуют селектору ('.color' в вашем случае) на данный момент . Это не относится ни к каким элементам, добавленным в будущем, или к существующим элементам, которые в настоящее время не соответствуют, но которые позже изменены. Он также не удаляет обработчик кликов автоматически из элементов, измененных, чтобы больше не соответствовать этому селектору.

К счастью, есть три способа назначить обработчик так, чтобы он работал для элементов, добавленных в будущем: .on(), .delegate() и .live() - если вы используете jQuery 1.7+, вы должны использовать .on(), в противном случае используйте .delegate(), потому что .live() устарела (и я упоминаю это только для полноты). В общих чертах, как работают все три, они назначают обработчик элементу контейнера, а затем, когда происходит событие, они проверяют, соответствует ли целевой элемент селектору, который вы указали изначально. Это означает, что все три позволяют вам определить свой обработчик один раз и автоматически применить его к элементам, добавленным в будущем. (Опять же для полноты я должен упомянуть, что .on() делает больше, чем это, в зависимости от параметров, которые вы передаете - для полной информации читайте страницу документа.)

Так или иначе, чтобы исправить свой код, попробуйте это:

// if your elements have an appropriate container, then specify it
// like so:
$('#yourcontainer').on('hover', '.color .selected', function(){
      $(".color span").css('background-position', '0px -24px');
},
function() {
      $(".color span").css('background-position', '0px 0px');
});

// OR, if you don't have a container and don't want to add one
// just specify document:
$(document).on('hover', '.color .selected', function(){
   // etc

Несмотря на то, что я не уверен, что вы можете назначить "hover" с помощью .on(), .delegate() или .live(): вам, возможно, придется назначить "mouseenter" и "mouseleave" вместо этого.

РЕДАКТИРОВАТЬ: Относительно того, что вы делаете, добавляя пустой промежуток: вы, кажется, пытаетесь использовать это как флаг на вашем элементе. намного лучший способ сделать это - просто добавить и удалить другой класс к вашему элементу, используя .addClass() и .removeClass().

Answer 5

Попробуйте добавить обработчики событий, используя метод live ().http://api.jquery.com/live/