Avatar billede heyn Nybegynder
16. december 2013 - 10:19 Der er 4 kommentarer og
1 løsning

JQuery: Min hover function virker ikke på dynamiske <tr>

Hej Eksperter

Jeg kan ikke få min hover function til at fungere på <tr> der oprettes dynamisk.

Jeg opretter 2 tabeller. En der indlæser alle <tr> fra starten, og en anden der viser opretter dem dynamisk under kørsel.

Min hover på de linier der oprettes fra starten fungerer. Men den fungerer ikke på dem der oprettes dynamisk.

Nedenstående viser min kode.

$('#prod_list tr').hover(
  function () {
      $(this).css('background','#FFC75F');
      $(this).css('cursor','pointer');
  },
  function () {
      $(this).css('background','#FFE77F');
      $(this).css('cursor','auto');
  }
);

$('#label_list tr').hover(
  function () {
      $(this).css('background','#FFC75F');
      $(this).css('cursor','pointer');
  },
  function () {
      $(this).css('background','#FFE77F');
      $(this).css('cursor','auto');
  }
);

"#prod_list" er body i den tabel hvor alle <tr> oprettes fra starten.
"#label_list" er body i den tabel hvor <tr> oprettes dynamisk.

Har nogen et forslag til en løsning?

Venligst Christian
Avatar billede jokkejensen Novice
16. december 2013 - 10:36 #1
kig på http://api.jquery.com/on/


ellers kald ovenstående events efter du har spyttet nye rows i DOM.

Ex.

function addEvents()
{
$('#prod_list tr').hover(
  function () {
      $(this).css('background','#FFC75F');
      $(this).css('cursor','pointer');
  },
  function () {
      $(this).css('background','#FFE77F');
      $(this).css('cursor','auto');
  }
);

$('#label_list tr').hover(
  function () {
      $(this).css('background','#FFC75F');
      $(this).css('cursor','pointer');
  },
  function () {
      $(this).css('background','#FFE77F');
      $(this).css('cursor','auto');
  }
);
}

addEvents()

Og kald så addEvents() efter du har lagt nye rows ind.

Men jQuery.on() er den rigtige løsning ex:

$( "#label_list tbody" ).on( "hover", "tr", function() {
    function () {
      $(this).css('background','#FFC75F');
      $(this).css('cursor','pointer');
  },
  function () {
      $(this).css('background','#FFE77F');
      $(this).css('cursor','auto');
  }
});

function trHoverEvent()

Vh
Avatar billede heyn Nybegynder
16. december 2013 - 12:23 #2
Jeg er ret ny i JQuery.

Jeg forstår ikke rigtigt. Hvor skal trHoverEvent() placeres i min kode?

Bare umiddelbart efter de on.hover funktionen?

Skal jeg ikke give trHoverEvent() noget indhold?

Venligst Christian
Avatar billede jokkejensen Novice
16. december 2013 - 14:09 #3
sry nej bare slet den..
Avatar billede heyn Nybegynder
16. december 2013 - 14:44 #4
Hej jokkejensen

Den med on fik det jquery til at kikse by some reason.

Men den anden med addEvents() fungerer fint.

Mange tak.

Smid et svar.
Avatar billede heyn Nybegynder
20. december 2013 - 08:30 #5
Nå - Så må jeg desværre selv smide det. Øv
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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