Jquery on/live click icm ajax loaded content

[We Are Borg]

Ja ja, wat een titel, ik zal het proberen goed uit te leggen

Op mijn pagina kan een gebruiker zoeken naar een naam. De resultaten worden dmv ajax 'live' ingeladen in #searchresultswrapper.

Het resultaat wat de ajax call terug geeft ziet er zo uit en wordt dus in #searchresultswrapper teruggegeven:

HTML:

<li>
   <a href="#" class="tag" onclick="SpecifyID('boom', 'aap');">
      <span class="displayname">%s, %s</span>
      <span class="appendid">%s</span>
   </a>
</li>

Zover werkt prima.

Op diezelfde pagina staat een stukje html

HTML:

<input id="boom" type="text" name="boom" value="">
<select id="aap"></select>

Nu wil ik de inhoud van span.displayname inserten als een nieuwe optie van select#aap, en de waarde van span.appendid inserten in de input#boom. Maar als de waarde al bestaat, moet het juist weer verwijderd worden

Functie voor gemaakt

JavaScript:

function SpecifyID(right, action) {

    $('a.tag').live('click', function(e){

        // add selected class
        $(this).toggleClass('selected');

        var newTag = $('#'+right).val().split(","); 


        $('a.tag.selected span.appendid').each(function(){

            var DisplayName = $('a.tag.selected span.displayname').text();
            var ID = $('a.tag.selected span.appendid').text();

            var found = jQuery.inArray($(this).text(), newTag);
            if (found >= 0) {
                // remove from hidden input
                newTag.splice(found, 1);

                // remove option from display list
                $('#'+action+' option[value='+ID+']').remove(); // selecttest

            } else {

                // check if zero (all) value is found, remove it
                var foundZero = jQuery.inArray('0', newTag);
                if (foundZero >= 0) {
                    // remove from hidden input
                    newTag.splice(found, 1);
                }

                // add var to hidden input
                newTag.push($(this).text());

                // add new option to display
                $('#'+action).append(new Option(DisplayName+'('+$(this).text()+')', $(this).text(), true, true)); 

            }

        });
        // return results to input
        $('#'+right).val(newTag);

        // clean box so search has to be renewed
        $("#searchresultswrapper").html('');

        return false;
    });

}

Deze 'werkt' zolang je de functie maar 1 keer gebruikt, maar bij meerdere keren de functie gebruiken met verschillende vars gaat het mis.

code:

function SpecifyID(right, action) {

// debug toegevoegd
alert (right);
alert(action;

    $('a.tag').live('click', function(e){

... // en dan verder

Als ik dan klik op een link met SpecifyID('boom','aap') en daarna klik op en link met SpecifyID('huis','hond') krijg ik bij die tweede link vier alerts

code:

boom
aap
huis
hond

Ik dacht dat dat iets cache achtigs was, maar na wat google werk kwam ik er achter dat het hier aan ligt

JavaScript:

    $('a.tag').live('click', function(e){

Hierdoor blijft hij events toevoegen aan de click waardoor ze allemaal achter elkaar komen. Oplossing die ik dacht gevonden te hebben adv de search om live niet meer gebruiken maar bijv on() op deze manier

JavaScript:

    $('#searchresultswrapper').on('click', "a.tag", function(e){

Maar ook dan krijg ik bij de 2de keer klikken ook de oude resultaten eerst terug

code:

boom
aap
huis
hond

Als test had ik ook bind() geprobeerd maar dat werkt helemaal niet goed (krijg wel waardes met alert terug, maar wordt niet goed geinsert)

Wie kan mij op weg helpen ?

edit: Het ligt trouwens niet aan de ajax content, want als ik zonder ajax een paar proef linkjes aanmaak en gebruik gaat het ook mis. Het zit dus echt in de javascript functie die ik heb gemaakt

edit 2:

JavaScript:

    $('#searchresultswrapper').unbind('click', "a.tag");

voor de on click functie werkt ook niet

[ Voor 4% gewijzigd door We Are Borg op 02-08-2013 21:00 ]

[We Are Borg]

Na veeeeel Google werk en testen de oplossing. Toevoeging onderaan de functie

JavaScript:

        $('a.tag').die('click');

Zo simpel