---
title: "Jquery, vissa länkar startar inte funktion"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/190314-jquery-vissa-länkar-startar-inte-funktion"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Mika3l"
published: "2012-09-10T19:31:02.000Z"
updated: "2012-09-10T19:50:13.000Z"
replies: 2
views: 408
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/190314-jquery-vissa-länkar-startar-inte-funktion"
---

# Jquery, vissa länkar startar inte funktion

## #1 — Mika3l, 2012-09-10T19:31Z

Arbetar med ett script som har fungerat finfint men nu går det helt plötsligt inte att starta en funktion med vissa länkar. Skapar en lista med klickbara thumbnails men funktionen vägrar dra igång, inte ens att ange bara "a" fungerar.
På andra länkar så fungerar det utmärkt, någon som kan lyckas luska ut vad felet kan tänkas vara? Jag gissar på Jquery så därför jag lägger det här, visar det sig vara CSS så får väl tråden flyttas. :)

```
$(document).ready(function() {
    //HIDE FULL IMAGE DIV ON START
    $("#fullimage").hide();

    var loadThumbs = function(element, images) {
        $(images).each(function(index, image) {
            // create the LI programatically
            var listItem = $('<li id="photo_' + index + '"></li>').attr('class', 'loading');

            // append the new LI to UL
            $(element).append(listItem);

            // new image
            var img = new Image();

            // load image
            var $img = $(img)
            .wrap("<a/>")
            .css('display', 'none')
            .addClass("thumb")
            .attr('src', '/Images/thumb_' + image.name)
            .load(function() {
                listItem.removeClass('loading').append(this);
                $img
                    .fadeIn()
                    .wrap("<a/>")
                    .parent()
                        .attr("href", '#')
                        .attr("title", image.title)
                        .addClass("thumblink");

            }).error(function() {
                listItem.remove();
            });
        });
    };

    $(function() {
        var imgfirst = [
        { name: 'ex1.png', title: 'test' },
        { name: 'ex2.png', title: 'test' },
        { name: 'ex3.png', title: 'test' },
        { name: 'ex4.png', title: 'test' },
        { name: 'ex5.png', title: 'test' },
        { name: 'ex4.png', title: 'test' }
        //{ name: '', title: '' },
    ];
        loadThumbs('ul#thumbs', imgfirst);
    });

    //OPEN FULL IMAGE ON THUMBNAIL CLICK
    $(".thumblink").click(function() {
        alert("get");
        $("#fullimage").fadeIn(500);
    });

    //CLOSE FULL IMAGE ON LINK CLICK
    //   $("#close").click(function() {
    //      $("#fullimage").fadeOut(500);
    //  })

});
```

```
#fullimage {
    position: absolute;
    background: #2e2e2e url('/Images/loader.gif') no-repeat center;
    width:  750px;
    min-height:  550px;
    z-index:  100;
}

#thumbsdiv {
    position: absolute;
    background:  #2e2e2e;
    width:  750px;
    min-height:  550px;
    z-index:  1;   
}

li.loading {
    background: url('/Images/loader.gif') no-repeat center center;
}

ul#thumbs
{
    clear: both;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
}

    ul#thumbs li 
    {
        list-style-type: none;
        float: left;
        padding: 0;
        margin-bottom: 7px;
        margin-right: 7px;
        width: 143px;
        height: 95px;
    }

        ul#thumbs li a 
        {
            text-decoration: none;
            line-height: 0em;
            background-color: #202020;
            color: #dadada;
            display: block;
        }
        ul#thumbs li a:hover 
        {
            background-color: #fafafa;
        }
        ul#thumbs li a:active {
            background-color: #ffffff;
            text-decoration: none;
        }

.thumb 
{
//  	opacity: 0.8;
//    filter: alpha(opacity=80);
	width: 143px;
	height: 95px;
	border: 0;
	margin: 0;
	padding: 0;
}
.thumb:hover 
{
    opacity: 0.75;
	filter: alpha(opacity=75);
}
.thumblink {
    background:  pink;
    border:  0;
}
```

Permalänk: https://www.webforum.nu/p/190314

## #2 — voigtann1, 2012-09-10T19:47Z

Det är för att bilderna inte finns när du kör ditt skript (du kör load, det är när bilden finns, inte när DOM:en är redo). lös det enklast med en delegate (on i jquery 1.7+):

```
    $('ul#thumbs').on('click', ".thumblink", function() {
        alert("get");
        $("#fullimage").fadeIn(500);
      return false;
    });
```

om du kör äldre version:

```
    $('ul#thumbs').delegate(".thumblink", 'click', function() {
        alert("get");
        $("#fullimage").fadeIn(500);
      return false;
    });
```

Permalänk: https://www.webforum.nu/p/2304565

## #3 — Mika3l, 2012-09-10T19:50Z

Hälja!! En får tacke'! :)

Permalänk: https://www.webforum.nu/p/2304566

---

Tråden på webben: https://www.webforum.nu/amne/javascript/190314-jquery-vissa-länkar-startar-inte-funktion