Toon posts:

[JavaScript] Button voert JS actie 2x

Pagina: 1
Acties:

Onderwerpen


  • Sc0tTy
  • Registratie: december 2003
  • Laatst online: 12:44
Ik gebruik voor overal op mijn website de zeflde knop :

PHP:
1
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    $("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:
1
2
3
4
5
6
7
    $.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.

Lumia 800 > 820 > 950 | Surface Pro 3 | Windows 10 Mobile Insider


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
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:
1
2
3
$('#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 :P

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
  • Registratie: april 2004
  • Laatst online: 15:04

pieturp

gaffa!

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!

... en etcetera en zo


  • BtM909
  • Registratie: juni 2000
  • Niet online

BtM909

Watch out Guys...

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

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • Sc0tTy
  • Registratie: december 2003
  • Laatst online: 12:44
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 )

Lumia 800 > 820 > 950 | Surface Pro 3 | Windows 10 Mobile Insider


  • apokalypse
  • Registratie: augustus 2004
  • Laatst online: 08-09 10:18
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:
1
2
3
var testNode = $("#test");
testNode.removeClass('class1');
testNode.addClass('class2');

Kan je opschrijven:
JavaScript:
1
$("#test").removeClass('class1').addClass('class2');
Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee