2016-05-17 15 views
5

Ho il seguente codice HTML e il jQuery associato. La funzione html funziona correttamente ma la funzione data non influisce affatto sull'HTML, non riesco affatto a capire come funziona, nessun errore nel browser.jQuery, data() non sta aggiornando l'attributo dei dati

HTML

<span id="usernameStatus" data-valid="0">x</span> 

jQuery

data viene restituito da una chiamata AJAX, sarà sempre e solo essere true o false.

function validUsername(data) 
{   
    if (data === 'true') { 
     $("#usernameStatus").html("y").data("valid", 1); 
    } else { 
     $("#usernameStatus").html("x").data("valid", 0); 
    } 
} 
+1

[Possibile duplicato.] (Http://stackoverflow.com/q/8707226/6188402) –

+0

Abbastanza sicuro che la funzione di dati non funzioni come ci si aspetterebbe. Sono piuttosto sicuro che jquery faccia una copia/ref/cosa degli attributi dei dati in modo che tu cambi ciò che non è attr. Se si guarda il .data per lo stesso elemento dopo averlo modificato, si vedrà che è cambiato ma l'attr di html rimarrà lo stesso. – Spaceman

+1

Puoi trovare una buona spiegazione qui: http://stackoverflow.com/questions/36663690/jquery-prop-returns-undefined-while-attr-works-as-expected-for-data –

risposta

3

Per jQuery Documenti API

Il metodo .data() ci dà la possibilità dati di qualsiasi tipo ad elementi DOM in un modo che è sicuro da riferimenti circolari e quindi da perdite di memoria.

Il metodo .data()non sarà modificare il nodo DOM esistente, ma sarà solo recuperabili tramite chiamata di $selector.data(). I tuoi elementi DOM non cambiano, solo i dati ad essi associati.

0

si può fare qualcosa di simile:

$("#usernameStatus").attr('data-valid','1'); 

Invece di ising .html(), che restituisce il contenuto interno di un elemento.

0

Il metodo .data() non modifica l'attributo dell'elemento DOM. Tuttavia, i dati vengono comunque salvati tramite. $selector.data(key, value); e può essere recuperato tramite. $selector.data(key);

Per aggiungere un attributo a un elemento DOM, è probabile che si desideri utilizzare lo .attr() method. Con .attr(), un attributo può essere collegato a un elemento tramite. $selector.attr(key, value); e può essere recuperato tramite. $selector.attr(key);

validUsername(data) {  
     if (data === 'true') { 
      $("#usernameStatus").html("y").attr("data-valid", 1); 
     } else { 
      $("#usernameStatus").html("x").attr("data-valid", 0); 
     } 
    } 

JSFiddle example

Uno dei vantaggi di utilizzare .attr() anziché .data() è la capacità di trovare tutti gli elementi con un attributo (e valore) via. il selettore $('[key="value"]').

Problemi correlati