События jQuery для динамически создаваемых ссылок

Question

У меня есть список ссылок, которые динамически создаются другой функцией, они имеют вид <a id="hi-1">test</a> <a id="hi-2">test</a> и т. Д.

Я пытаюсь настроить таргетинг на эти ссылки и привязать к ним события щелчка / мыши. Ниже приведен код для ориентации на одну из этих ссылок (# hi-1):

$(function() {

    $("#hi-1") .bind("mouseover", highlight);
    $("#hi-1") .bind("mouseleave", highlight);
            $("#hi-1") .bind("click", highlight);

    });
    function highlight(evt){
    $("p#p-1").toggleClass("highlighted");
    }

Это должно переключать имя класса.

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

Любая помощь очень ценится.

Answer 1

Селекторы применяются во время создания.Вы выбираете элементы, затем привязываетесь к этим элементам, а не к селектору.

Однако вы можете использовать всплывающее окно событий - элементы-предки уведомляются о событиях на дочерних элементах.jQuery предоставляет красивый синтаксис для этого с delegate:

$('#containerElement').delegate('#hi-1', 'click mouseover mouseleave', highlight);

Это предполагает, что #containerElement является элементом-предком всех элементов, которые будут сопоставлены.

---

Тем не менее, если у вас есть только один элемент (как предлагается, указав ему идентификатор), может быть проще связать обработчик во время создания элемента.

Answer 2

Попробуйте

$("#hi-1").live("mouseover mouseleave click", function(){
    $("p#p-1").toggleClass("highlighted");
});

Answer 3

Вы должны использовать метод .live () jquery.

http://api.jquery.com/live/

Присоединить обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.

Пример:

$('.clickme').live('mouseover', function() {
    // live handler called
});