jQuery - программно создавать динамические ссылки - PullRequest
Новая
       29

jQuery - программно создавать динамические ссылки

1 голос
/ 15 апреля 2011

Я довольно новичок в программировании на jQuery и javaScript и спрашиваю, может ли кто-нибудь мне помочь?

У меня есть ползунок, который заполнен неупорядоченным списком.Работает очень хорошо, динамически отображая текст поверх изображений кнопок.Каждый из этих элементов списка содержит ссылку, которая вызывает функцию.Например: 

<li><div class="btnGraphic"><img src="images/button.png" /><a href="#" id="my_link"><div class="btnText">'MyTitle'</div></a></div></li>';

Однако теперь я хочу заполнить всю страницу динамически, используя файл XML.На страницах не будет статического содержимого, поэтому содержимое слайдера должно быть способным изменяться и использовать переменное количество кнопок и, следовательно, ссылок.Я извлек данные из файла XML и сохранил их в нескольких массивах.Код для добавления элемента списка теперь выглядит следующим образом: 

for (i = 1; i < count; i++) {
    var newListItem = '<li><div class="btnGraphic"><img src="images/button.png" /><a href="#" id="'+myLink[i]+'_link"><div class="btnText">'+myTitle[i]+'</div></a></div></li>';
    $("#sliderList").append(newListItem);
};

Пока все хорошо.Я думаю.Однако, где я не могу продвинуться дальше, это программно создать ссылку.Ссылка открывает диалоговое окно jQueryUI.Код для ссылки на статической странице выглядит следующим образом: 

$('#my_link').click(function(){
     clearScreen(); //clears any open dialog boxes
     $('.myContent').dialog('open');
     return false;
});

Мой вопрос к вам: как мне создать этот код программным способом?Следующее, я знаю, что абсолютно не правильно и далеко, но это дает представление о том, что я хочу сделать: 

for (i = 1; i < count; i++) {
    $("'"+myLink[i]+"_link'").click(function() {
        clearScreen(); //clears any open dialog boxes
        $("'."+myContent[i]+"'").dialog.('open');
        return false;
    });
};

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

Ответы [ 2 ]

4 голосов
/ 15 апреля 2011

Вы можете прикрепить обработчик кликов (то есть то, что вы называете «ссылкой») перед добавлением вновь созданных элементов в дерево DOM.Попробуйте изменить блок следующим образом: 

for (i = 1; i < count; i++) {
    var myNewContent = "."+myContent[i]; // bind myContent[i] to the closure
    var newLink = $('<a href="#" id="'+myLink[i]+'_link"><div class="btnText">'+myTitle[i]+'</div></a>');
    newLink.click(function() {
        clearScreen(); //clears any open dialog boxes
        $(myNewContent).dialog('open');
        return false;
    });
    var newListItem = $('<li />').append(
        $('<div class="btnGraphic" />').append(
           '<img src="images/button.png" />',
           newLink
        )
    );
    $("#sliderList").append(newListItem);
};
2 голосов
/ 15 апреля 2011

Две интересующие вас страницы документа: метод делегата jQuery и плагин шаблона jQuery .

Лучшее решение, вероятно, будет выглядеть примерно так: 

$('#sliderList').delegate('li a','click',function(event){
  event.preventDefault();
  // do stuff
});

Рекомендуется использовать live, потому что вы останавливаете событие на уровне списка, а не позволяете событию пузыриться по всему дереву DOM. Но использование delegate или live приведет к хорошим результатам.

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

Я включил ссылку на шаблонный плагин, потому что это фантастический способ преобразовать структурированные данные в HTML, не прибегая к их построению в javascript.

...