[JavaScript] Button voert JS actie 2x

[Sc0tTy]

Ik gebruik voor overal op mijn website de zeflde knop :

PHP:

<div class="button"><a href="javascript:addNewExpenseRow( );">New Expense</a></div>

Heel simpel zorgt de div er voor dat ik een mooie knop heb.

Daarnaast heb ik de volgende jQuery code lopen

JavaScript:

    $("div#contentContainer").find( ".button" ).unbind();
    $("div#contentContainer").find( ".button" ).mouseover(
        function() {
            $(this).addClass("buttonHover");
        } ).mouseout(
        function() {
            $(this).removeClass("buttonHover");
        }
    );
    
    $("div#contentContainer").find( "div.button" ).click(
        function() {
            var x = $(this).find("a");
            if ( x.attr("target" ).length > 0 ) {
                window.open(x.attr("href"), x.attr("target" ) );
            } else {
                document.location.href = x.attr("href");
            }
        }
    );

Dit werkt normaal gesproken altijd prima. Maar ik heb voor deze knop een verwijzing gedaan naar een JS code:

JavaScript:

    $.get(
        'index.php',
        { page : "projects", show : "getexpenserow" },
        function ( data ) {
            $( data ).insertBefore( "table#expenses tr#addRow");
        }
    );

Dit werkt in prenciepe ook goed

Mijn probleem is dit. Klik op een willekeurige positie in de div , komt er 1 nieuwe rij bij. Maar zodra ik op de tekst in de div klik ( dus het <a> element ) krijg ik 2 rijen er bij. Wat mij erg logisch lijkt aangezien door de JS code een 2e hook komt op dat element door dat ie in het <div> element zit.

Weet iemand hier een mooie oplossing voor, ik wil niet met een counter oid gaan werken.

[Bosmonster]

Waarom die div eromheen en niet gewoon de a-tag gebruiken als hook? Je kunt ook de hover dan gewoon met css regelen ipv javascript. En waarom trouwens die functie dan weer inline aanroepen?

Overigens kun je je unbind/mouseover/mouseout eenvoudig vervangen door

JavaScript:

$('#contentContainer').unbind().hover(function(){
   $(this).toggleClass('buttonHover')
});

Scheelt je een hele lap code en je maakt tenminste gebruik van de kracht van jQuery.

Je kunt het met event bubbling wel voorkomen met stopPropagation, maar dat is symptoombestrijding natuurlijk.

nofi, maar het voelt een beetje houtje-touwtje aan bovenstaande

Ik snap eerlijk gezegd ook niet goed wat het moet doen. Je button opent een popup of zelfs een nieuwe pagina, maar je link erin roept een ajax-functie aan...

[Voor 68% gewijzigd door Bosmonster op 25-10-2010 23:39. Reden: beetje leesbaarder gemaakt]

[pieturp]

Snap er ook weinig van, en ik zie ook niet waarom je dit niet met HTML en CSS oplost. Immers; gewoon een <a> in je HTML met een a:hover in je CSS doet precies 't zelfde toch?
Ik zou de XHR afhandeling van dit geheel gewoon op al die <a> 's binden, en middels stopPropagation inderdaad voorkomen dat de link geopend wordt in antieke browsers.

Succes!

[BtM909]

't Klinkt trouwens dat je zelfs een <button> had kunnen gebruiken

[Sc0tTy]

Bedankt voor het reageren.

Ik heb nu overal op de a elementen de button class gezet, werkt gewoon het zelfde nooit bij nagedacht

Ook vergeet ik elke keer dat jQuery het zelfde object returned als je een functie op het object aan roept.

( Ben ook geen fulltime webdevver )

[apokalypse]

Sc0tTy schreef op vrijdag 29 oktober 2010 @ 18:01:
Ook vergeet ik elke keer dat jQuery het zelfde object returned als je een functie op het object aan roept.

Dat kan je goed onthouden indien je voordelen ervan ziet.
In jQuery kan je chainen, wat de code veel korter en duidelijker maakt. Dus in plaats van:

JavaScript:

var testNode = $("#test");
testNode.removeClass('class1');
testNode.addClass('class2');

Kan je opschrijven:

JavaScript:

$("#test").removeClass('class1').addClass('class2');