jQuery code only works at times?

Question

I am still pretty unexperienced with jQuery, and I've been trying to make something. The general idea is that when you click an image, the "alt" attribute of that image is added to a paragraph above it.

You will see the code I tried to use for this below. Right now, it works, but only on occasions. For example, the first image I click always returns "undefined" as an alt. But if I keep trying to click it, sometimes it gives me the right one.

My images are selectable, and when I select all of them at once, it gives the exact right names every time.

Has anyone else ever experienced this problem?

HTML code (I'm sorry it's in a different language, ask me if you would need translations:

<div id="onzeleden">
    <p id="feedback">Tijdens "De Bluts" zagen we de beste beentjes van... 
    <span id="select-result"></span></p>
    <div id="leden">
        <abbr title="Jeroen Beckers">
            <img src="fotos%20leden/Jeroen%20transp.gif"
                     alt="Jeroen Beckers"></abbr>                
        <abbr title="Luc Verreet">
            <img src="fotos%20leden/Luc%20transp.gif"
                     alt="Luc Verreet"/></abbr>
        <abbr title="Kristel Van den Broeck">
            <img src="fotos%20leden/Kristel%20transp.gif"
                     alt="Kristel Van den Broeck"/></abbr>
        <abbr title="Jesse Op de Beeck">
            <img src="fotos%20leden/Jesse%20transp.gif"
                     alt="Jesse Op de Beeck"/></abbr>                                      
        <abbr title="Maria Bogaerts">
            <img src="fotos%20leden/Maria%20transp.gif"
                     alt="Maria Bogaerts"/></abbr>          
        <abbr title="Bruno Van Impe">
            <img src="fotos%20leden/Bruno%20transp.gif"
                     alt="Bruno Van Impe"/></abbr>
        <abbr title="Brenda De Laet">
            <img src="fotos%20leden/Brenda%20transp.gif"
                     alt="Brenda De Laet"></abbr>
        <abbr title="Els Donckers">
            <img src="fotos%20leden/Els%20transp.gif"
                     alt="Els Donckers"></abbr>
</div>

---

Javascript code:

$(function() {
    $( "#leden" ).selectable({
      stop: function() {
        var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {
          var index = $( "#leden img" ).index( this );
          var sAlt = $(this).attr("alt");
          result.append(sAlt + ". ");
        });
      }
    });
});

Answer 1

It's because your click is handled by your abbr, which has no alt attribute.

If you want to make only your images selectable, your should add filter option to your selectable declaration, like this:

$(function() {
  $( "#leden" ).selectable({
     filter: 'img',
     stop: function() {
        var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {

           var sAlt = $(this).attr("alt");
           result.append(sAlt + ". ");
        });
    }
  });
});

See the fiddle: HERE