Witam forumowiczów!
Mam mały problem z jquery:(
Mianowicie - nie mogę 2 razy wyciągnąć tego samego elementu z DOM
za pomocą funkcji wybieram wszystkie elementy listy (li) i je sortuje potem chce aby po kliknięciu w jeden z elementów otworzył się dialogbox (jquery ui) i albo działą mi jedno albo drugie - razem ni cholery;/
kod jest następujący:
$(document).ready(function(){
// FRAGMENT ODPOWIADAJACY ZA DIALOG BOX
var $loading = $('<img src="loading.gif" alt="loading" class="loading">');
$('#stage li a').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
//KONIEC FRAGMENTU DIALOGBOX
//FRAGMENT ODPOWIADAJACY ZA SORTOWANIE ITP
var items = $('#stage li'),
itemsByTags = {};
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
elem.attr('data-id',i);
$.each(tags,function(key,value){
value = $.trim(value);
if(!(value in itemsByTags)){
itemsByTags[value] = [];
}
itemsByTags[value].push(elem);
});
});
createList('Wszystkie',items);
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#filter a').live('click',function(e){
var link = $(this);
link.addClass('active').siblings().removeClass('active');
$('#stage').quicksand(link.data('list').find('li'));
e.preventDefault();
});
$('#filter a:first').click();
function createList(text,items){
var ul = $('<ul>',{'class':'hidden'});
$.each(items,function(){
$(this).clone().appendTo(ul);
});
ul.appendTo('#container');
var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#filter');
}
//KONIEC FRAGMENTU SORTOWANIA
});
I tak jak wytne fragment odpowiedzialny za sortowanie to nie ma problemu aby po kliknieciu w element listy wyswietlil sie dialog box, jeśli wszystko jest razem to sortowanie działa ale po kliknieciu na link (który miał otworzyć dialogboxa) zostaje po prostu przenoszony do strony która miałą wylądować w dialogu.
struktura strony wygląda następująco:
<nav id="filter"></nav>
<section id="container">
<ul id="stage">
<li data-tags='tag1 tag2 '><a href="a.htm"><img src='4.jpg' alt="opis" /></a></li>
<li data-tags='tag1 '><a href="b.htm"><img src='4.jpg' alt="opis" /></a></li>
<li data-tags='tag2 tag3'><a href="c.htm"><img src='4.jpg' alt="opis" /></a></li>
</ul>
</section>
//edit
Macie jakieś propozycje jak to rozwiązać?
co jest nie tak?