JQuery UI - Dialog - Deleting items?
Hi,
Firstly, hello everyone!
Secondly, please bear with me. I only started developing a week ago - I didn't even know HTML/CSS prior to that. So It's highly likely I have made a n00b-style booboo either in my own HTML, or in the implementation of the JQUI Dialog.
Right,
I have a page, with a gallery on it. I associate the id="dialog" to the img that I wish to have pop up in a dialog and that works fine. However... as a result of this, the item associated with id="dialog" gets removed from my page completely so I can't click it a second time.
It's really strange and I can't figure it out. It doesn't matter if I move the id="dialog" to the <img>, <a> or <li>. Whatever I chose - *that* gets removed, along with anything inside of it.
Here is the header code:
- <script type="text/javascript">
- $(function() {
- $("#dialog").click(function(){
- $("#dialog").dialog({ position: 'center'})
- $("#dialog").dialog('open');
- return false;
- });
- });
- </script>
Here is the body code (has all the correct HTML around it):
- <ul id="portfolio">
- <li class="filter-0"><a href="#"><img id="dialog" src="images/item.jpg" alt="" />Item 0</a></li>
- <li class="filter-1"><a href="#"><img src="images/item.jpg" alt="" />Item 1</a></li>
- <li class="filter-2"><a href="#"><img src="images/item.jpg" alt="" />Item 2</a></li>
- <li class="filter-0"><a href="#"><img src="images/item.jpg" alt="" />Item 3</a></li>
- <li class="filter-1"><a href="#"><img src="images/item.jpg" alt="" />Item 4</a></li>
- <li class="filter-2"><a href="#"><img src="images/item.jpg" alt="" />Item 5</a></li>
- <li class="filter-0"><a href="#"><img src="images/item.jpg" alt="" />Item 6</a></li>
- <li class="filter-1"><a href="#"><img src="images/item.jpg" alt="" />Item 7</a></li>
- <li class="filter-2"><a href="#"><img src="images/item.jpg" alt="" />Item 8</a></li>
- <li class="filter-0"><a href="#"><img src="images/item.jpg" alt="" />Item 9</a></li>
- </ul>
Any ideas? Your help is much appreciated.
GG