Получение доступа к элементу jquery, который был просто добавлен в DOM

Я просто добавляю элемент, который находится в DOM, например:

$("#div_element").append('<a href="#">test</a>');

Сразу после добавления к нему мне нужен доступ к элементу, который я только что сделал, чтобы связать с ним функцию клика, я пробовал:

$("#div_element").append('<a href="#">test</a>').click(function(){alert("test")});

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

Ответ 1

Вы можете сделать это:

var el = $('<a href="#">test</a>');

$("#div_element").append(el);

el.click(function(){alert("test")});

// or preferrably:
el.on('click', function(){alert("test")});

Функция append принимает два типа аргументов: строку или элемент jQuery. В случае, если строка передана, она будет внутренне создавать элемент jQuery и добавлять его к родительскому элементу.

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

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

Ответ 2

var $a = $('<a />', {href:"#"})
  .text("test")
  .on('click', function(e) { 
     alert('Hello') 
  })
  .appendTo('#div_element');

http://jsfiddle.net/33jX4/

Ответ 3

Добавьте идентификатор к этому element, затем используйте его следующим образом

$("#div_element").append('<a id="tester" href="#">test</a>');


$('#tester').on('click', function(event) {
console.log('tester clicked');
});

Ответ 4

Почему бы не сохранить ссылку на новый элемент перед его добавлением:

var newElement = $('<a href="#">test</a>');
$("#div_element").append(newElement);
newElement.click(function(){alert("test")});

Ответ 5

Последним элементом будет новый элемент

$('a:last','#div_element').on('click',function(){
    // do something
});

Ответ 6

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

var ele =$("<a href='#'>Link</a>");

ele.on("click",function(){
    alert("clicked");
});


$("#div_element").append(ele);

Ответ 7

Просто присоедините обработчик кликов к якорю перед добавлением его.

$("#div_element").append($('<a href="#">test</a>').click(function(){alert("test")}));