JQuery обработчик щелчка

Question

Я создаю кучу тегов динамически, добавляя их к я затем добавить обработчик щелчка ...

$(document).ready(function(){ 
    // ... code to append <a> tags to nav div   
    $("#nav a").click(function(event){ 
     alert('Clicked '+event.target.id); 
     return false; 
    }); 
}); 

Если у меня есть 10 тегов, как результат этого, и нажмите на первый , Я получаю 10 (TEN!) Предупреждений - но все они показывают идентификатор тега, который я на самом деле нажал.

(Если я нажимаю на 5-теге, да, я получаю 5 предупреждений - все с идентификатором 5-я тега ...)

Что здесь происходит? Это потому, что я динамически создавал теги? Есть ли способ избежать этого?

Благодаря

Answer 1

Попробуйте вместо этого:

$(document).ready(function(){ 
    /* ... code to append <a> tags to nav div. */  
    $("#nav a").each(function(){ 
      $(this).click(function(e){ 
       alert('Clicked ' + e.target.id); 
       return false; 
      }); 
    }); 
}); 

Во всяком случае, они оба одинаковы! У вас нет проблем с вашим кодом. Проверьте код генерации тегов на наличие ошибок.

Answer 2

Try:

$(document).ready(function(){ 
    // ... code to append <a> tags to nav div   
    $("#nav a").click(function(event){ 
     alert('Clicked '+ this.id); // replaced with "this" 
     return false; 
    }); 
}); 

И убедитесь, что ваш код действителен, например:

<nav id="nav"> 
<a id="1" href="#"></a> 
<a id="2" href="#"></a> 
// ... 
</nav> 

Answer 3

Хммм ... Я думаю, что вы должны проверить, если ваши теги быть закрыто правильно. Используйте firebug, чтобы проверить сгенерированный HTML. Вы бы могли бы получить, если ваш HTML выглядел

<a>one<a>two<a>three</a></a></a> 

Answer 4

Первоначальное использование firebug для проверки правильности размещения идентификатора, затем я изменю ваш код и узнаю, работает ли он.

$(document).ready(function(){ 
    // ... code to append <a> tags to nav div   
    $("#nav a").click(function(event){ 
     alert('Clicked '+ $(this).attr('id')); 
     return false; 
    }); 
}); 

Answer 5

Ваш код верный, по крайней мере, он работал для меня здесь, в моем тесте.

Проблема может быть странностью IE6 или просто проблемой CSS с положением: абсолютным; Дисплей: блок;

Мне кажется НЕ проблемой javascript.

Answer 6

Как и другие, я заметил, что с кодом, который вы используете для динамического создания якорей, есть что-то не так.

Тем не менее, вот пример того, что должен достичь результата вы прицеливание для:

$(document).ready(function(){ 

    var eNav = document.getElementById('nav'); 

    var aLink = null; 
    for(var i = 0; i < 5; i++) { 
    aLink = document.createElement('a'); 
    aLink.href = 'javascript:;'; 
    aLink.id = i; 
    aLink.appendChild(document.createTextNode('Link')); 
    eNav.appendChild(aLink); 
    } 

    $("#nav a").click(function(event){ 
    alert('Clicked '+ event.target.id); 
    return false; 
    }); 

}); 

Answer 7

Это звучит для меня как вашего связывания обработчика событий функции x количество раз к каждому элементу, где x является индекс этого элемента (+ 1) в свойствах массива/объекта, над которыми вы итерации выполняете привязку.

Как вы добавляете элементы <a> в DOM? Вы можете показать полный код?