jQuery.attr() funciona bien en Google Chrome e IE, pero falla en Firefox 8.0.1

jquery-selectors firebug

Question

Me enfrento a un comportamiento curioso de Firefox 8.0.1: este código funciona bien en Google Chrome y en IE, pero en Firefox falla, excepto si lo ejecuto en ''modo de depuración _ paso por paso'' o si pongo un alerta justo después de la línea donde establecí el atributo "rel" ...

// some stuff before
// this piece of code works fine excepts on FF
        totaltracks = data.length;
    j=0;
    while(j<totaltracks){
        newtrack =data[j];
        myPlaylist.add(newtrack);
        tracks = $("a.jp-playlist-item");
        curtrack =  $("a.jp-playlist-item")[j];
        $(curtrack).attr({rel:j});
        // I tried too : $("a.jp-playlist-item")[j].attr("rel",j); with same no effect on FF
        j++;            
    }    

Parece que FF simplemente no se ocupa de las instrucciones (o salta) si no se hace paso a paso ... 2 días pasaron frente a esta pared ... cualquier ayuda / pista / truco sería muy apreciada

Answer 1

Al leer los comentarios parece un problema de tiempo. Tuve un problema similar con un componente externo una vez. Funcionó cuando se desarrollaba a través del código pero no mientras se ejecutaba normalmente.

Lo resolví esa vez con un truco:

Después de configurar todos los valores, agregué un pequeño tiempo de espera antes de ejecutar el código.

//set values
setTimeout(function(){
//I called the textbox I had problems with here
}, 20);

Funcionó ese momento y aunque preferiría haberlo resuelto correctamente, era mejor que el cuadro de texto roto. Causará una pequeña demora, así que en realidad revisé el navegador con el que tuve problemas y ejecuté el código normal de otra manera.

Answer 2

Aunque encuentro que los detalles de lo que estás haciendo son un poco peculiares, traté de encontrar una forma más estable de lograrlo. Parece plausible que el comportamiento inconsistente que está viendo se deba a problemas de tiempo. Los ataques "alert", "debug steppping" y "setTimout" apuntan en esa dirección.

Primero, algunos comentarios sobre tu código

totaltracks = data.length;
j=0;

// I preferably use $.each() in these type of situations.
// See http://api.jquery.com/jQuery.each/
while(j<totaltracks){
    newtrack =data[j];
    myPlaylist.add(newtrack);

    // Here you select the same DOM elements for every loop of the while statement.
    // This is a performance issue.
    tracks = $("a.jp-playlist-item");

    // Here you select the those DOM elements once again,
    // then you assign the j:th element to the curtrack variable.
    // This doubles the performance issue.
    curtrack =  $("a.jp-playlist-item")[j];

    $(curtrack).attr({rel:j});
    j++;            
}

Creo que estos problemas de rendimiento posiblemente sean la causa de sus problemas.

Segundo, mi sugerencia

// Select the DOM elements only once.
var trackElements = $("a.jp-playlist-item"),
    trackData = [
                    {title: ''Stuck in a groove'', artist: ''Puretone''},
                    {title: ''Addicted To Bass'', artist: ''Puretone''},
                    {title: ''Hypersensitive'', artist: ''Puretone''}
                ];

$.each(trackData, function(index, newTrack){
    myPlaylist.add(newTrack);
    $(trackElements[index]).attr("rel", index);
});

En tercer lugar, el ejemplo completo

Creé este violín para que juegues con él. Demuestra mi sugerencia de una manera más completa. Espero que esto te indique la dirección correcta.

Answer 3

Está guardando un objeto jQuery en una variable;

curtrack =  $("a.jp-playlist-item")[j];

pero luego intentas convertir esa variable en un objeto jQuery al envolverlo $ ()

$(curtrack).attr({rel:j});

Pruebe curtrack.attr ("rel", j);