JQuery Append html5

Question

У меня есть матрица тегов <a href="">, генерируемый этим кодом в JQuery:

function makeList(){ 
    var listContainer = $("#matrix"); 
    for(i=0; i<10; ++i){ 
     listContainer.append($("<nav><ul> <li><a href="">v1</li> 
      <li><a href="">v2</li> <li><a href="">v3</li> 
      <li><a href="">v4</li>")); 
     console.log("adding..."); 
    } 
} 

Теперь у меня есть 40 <a href=""> ссылки, и пользователь нажимает одну из них. Мне нужно получить доступ к этому самому <a href=""> и сделать что-то к нему.

Как я могу это сделать? Спасибо

Answer 1

Поскольку элементы присоединяются, изначально DOM не будет иметь элементов. Использование on event handler.

Синтаксис:

.on('event', 'selector', fn);

Plus, используя "это" ключевое слово, вы можете получить элемент, который вы только что нажали.

$("a").on("click",function(){ 
    console.log($(this).html()); 
}); 

приложили необходимые элементы и добавил обработчик события в следующем fiddle.

Answer 2

Ваш вопрос не очень ясен для меня.
Если вы хотите, чтобы определить, на что нажали, вам помогут следующие фрагменты кода.

$("a").on("click",function(){ 
 
    alert($(this).html()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<a href="#">Link 1</a> 
 
<a href="#">Link 2</a> 
 
<a href="#">Link 3</a> 
 
<a href="#">Link 4</a>

Answer 3

Попробуйте добавить класс к <a> тега и использовать добавленный класс как селектор для события щелчка и получить доступ к щелкнул метку, используя this указатель/ссылку.

Ниже ПРИМЕР-

<a class="test" href="#">Test 1</a> 
<a class="test" href="#">Test 2</a> 
<a class="test" href="#">Test 3</a> 
<a class="test" href="#">Test 4</a> 

$('.test').on('click',function(){ 
alert($(this).text()); 
}); 

Рабочей Fiddle-http://jsfiddle.net/pp8b7aec/

Answer 4

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

синтаксис:

$(staticParent).on('event', 'selector', fn); 

так что в вашем случае вы можете сделать это:

$(function(){ 
    $("#matrix").on('click', 'nav a', function(e){ // register the event on static parent 
     e.preventDefault();// stops the link to navigate 
     alert(this.textContent); // alert the text written in the clicked link. 
    }); 
}); 

в коде выше, вы можете даже делегировать в $("#matrix"), $("body") or $(document).