Создание вложенных элементов

Question

Я пытаюсь динамически создать следующее, используя данные из массива

<li><a href="#" class="red" id="5"><span>Some text</span></a></li>

На данный момент я создаю его довольно простым способом

var link = '<li><a href="#" class="' + this.cssClass + '" id="' + this.id + '"><span>' +   this.text + '</span></a></li>';
$('#options').append(link);

Хотя мне нужно запустить функцию при нажатии на ссылку, как лучше всего это сделать?

Answer 1

$('<a>').attr({
    id: this.id,
    href: '#'
}).addClass(this.cssClass).click(function() {

     // click event

}).html('<span>' + this.text + '</span>')
  .appendTo($('<li>').appendTo('#options'));

Answer 2

Что мне нравится делать в этих ситуациях, так это создавать на странице скрытый элемент «шаблон», который я клонирую для каждого элемента в массиве

<li id="template"><a href="" class="" id=""><span></span></a></li>

затем перебираем массив и добавляем эти элементы

$(arr).each(function(i){
    MyObject obj = arr[i];
    var $li = $("#template").clone().removeAttr("id");
    $("a", $li).attr("id", obj.id).addClass(obj.cssClass);
    $("span", $li).text(obj.text);
    $("ul").append($li);
});

забыл обязательную часть ссылки !!

$("ul li a").live("click", function (){
    // DO WORK
});

Это должно связать все твои события "a", которые будут нажаты навсегда

Answer 3

// 1. create jquery object from your html
var $li = $(link);

// 2. bind <a> element's click event
$("a", $li).click(function(){
   // your code or a function
});

// 3. place <li> somewhere in html
$("body").append($li);

Answer 4

То, как вы строите строку, хорошо (хотя это может выглядеть не так хорошо, как при использовании всех функций jQuery) и на самом деле будет выполнять быстрее , чем простое использование всех вспомогательных функций jQuery. Как это сделать одним махом так:

$('<li><a href="#" class="' + this.cssClass + '" id="' + this.id + '"><span>' + this.text + '</span></a></li>')
    .appendTo('#options').find('a').click(function(e){
      // Handle click
      e.preventDefault();
    });

Answer 5

Попробуйте это:

$(link).find('a').click(clickHandlerFunction).end().appendTo('#options');