Avatar billede AnyFellow Mester
18. november 2012 - 13:48 Der er 9 kommentarer og
1 løsning

Fange klik på knap med dynamisk navngivet ID

Hvordan fanger jeg et klik på en <button>, hvor ID er navngivet dynamisk:
unixtimexxxxxxxxxx (f.eks. unixtime1234567890, eller unixtime7654321234)

Der er en del andre knapper på siden, så i princippet kunne jeg fange et klik på en knap, og så reagere ud fra navnet på knappen, men jeg har ikke  nok kendskab til jquery til at vide om det vil være en dårlig løsning?

Mit næste problem er så at få de 10 cifre i knap-ip i en variabel, således jeg kan bruge dem videre i mit script?

Nogen der kan hjælpe?
Avatar billede olebole Juniormester
18. november 2012 - 18:04 #1
<ole>

<button onclick="foo(this.id)" id="unixtime1234567890">Knap</button>

/mvh
</bole>
Avatar billede tjens Nybegynder
18. november 2012 - 18:22 #2
Jeg havde et projekt, som blev for langsomt i jquery p.g.a hundredevis af draggable objekter og et par tusind droppables.

Her blev jeg anbefalet at bruge delegated event handling, og det hjalp virkelig på performance.

Nu ved jeg ikke om du også har usandsynligt mange dynamiske objekter, men måden at registre klik på kan du se i denne demo:

http://tjens.dk/eksperten/972453/
Avatar billede olebole Juniormester
18. november 2012 - 19:33 #3
@tjens: Fuldstændig korrekt! Delegerede handlers er som regel langt at foretrække. På den anden side er oplysningerne så sparsomme, at det måtte blive til #1  =)

Jeg ville nu lave dit script en smule om, så det virker i andet end IE - og så har jeg slanket ShowMessage en del:

function clickEventDelegate( e ) {
    var elmTarget = e ? e.target : event.srcElement;
    if (elmTarget.id.indexOf("TimerButton_") == 0) {
        TimerButtonClicked(elmTarget)
    }
    else ShowMessage( "Clicked: " + elmTarget.nodeName + " " + elmTarget.id );
}

function TimerButtonClicked( btn ) {
    var timeFromId = btn.id.split("_")[1];
    ShowMessage("Time Clicked: " + timeFromId) ;
}

function ShowMessage( txt ) {
    document.getElementById("Message").firstChild.nodeValue = txt;
}

window.onload = function () {
    document.body.onclick = clickEventDelegate;
}

- og jeg ville nok også vælge et element 'længere nede' i hierakiet end document.body at lægge click-handleren på, men det er ikke til at anvise et andet, når man ikke kender koden, det skal virke i  =)
Avatar billede olebole Juniormester
18. november 2012 - 19:42 #4
PS: Rigtig mange har misforstået brugen af libraries som jQuery. Faktisk kræver det ofte bedre forståelse af JavaScript, DOM og CSS, når man bruger jQuery.

Der er f.eks. adskillige muligheder for at konstruere handlers med jQuery. Visse af dem performer skræmmende elendigt - men det er svært (læs: umuligt) at overskue, hvis man ikke er rigtig stærk i JavaScript/DOM.

Derfor giver det i et forum som Eksperten langt bedre mening at anvise en løsning uden jQuery  *o)
Avatar billede tjens Nybegynder
18. november 2012 - 20:15 #5
Tak for input Ole.

Ny version af demo med din reviderede kode her: http://tjens.dk/eksperten/972453/index2.html
Avatar billede AnyFellow Mester
19. november 2012 - 15:52 #6
tjens...> Tak for løsningen, den giver mig en idé til hvordan jeg kan integrere det i mit script. Læg et svar og der er point på vej.

olebole...> Tak for input, hvis det kan berolige dig en smule, så skal jeg nok rette til således der checkes på et mere konkret element på min side. Du samler stadig ikke på point?
Avatar billede olebole Juniormester
19. november 2012 - 19:30 #7
Selvtak, og du har helt ret - jeg samler stadig ikke. Det er ikke ligefrem hysterisk nødvendigt at vælge et element 'tættere' på de søgte - men tjens' erfaring er nu ganske lærerig. En dag sidder man med en app i større skala, og så forstår man ikke, hvorfor den bryder sammen. Derfor kan det altid betale sig at tænke i effektivitet/performance  *o)
Avatar billede AnyFellow Mester
19. november 2012 - 19:52 #8
Jeg forsøger altid så vidt muligt at holde det simpelt.

Jeg foretrækker også at adressere mine elementer så præcist som muligt, for at minimere risikoen for at andre elementer bliver påvirket.
Avatar billede olebole Juniormester
19. november 2012 - 20:00 #9
Fornuftigt!  *o)
Avatar billede tjens Nybegynder
19. november 2012 - 21:37 #10
Hermed et svar
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester