jQuery funziona in console ma non nel codice originale

Question

Ho provato il seguente codice per aggiungere href al tag all'interno di un td. sta funzionando bene mentre lo faccio in console. Ma quando provo lo stesso nel mio codice non funziona. Qualcuno può dirmi il motivo?

<script> 
    $("table tbody tr td a").attr('href','http://www.google.com'); 
</script> 
<table> 
    <tr> 
     <td><a >Hai</a></td> 
    </tr> 
</table> 

Answer 1

metterlo in una sezione pronto:

<script type="text/javascript"> 
$(document).ready(function() { 
$("table tbody tr td a").attr('href','http://www.google.com'); 
}); 
</script> 

Answer 2

L'elemento non esiste quando il jQuery è in esecuzione. Devi mettere i tuoi gestori all'interno di una funzione pronta.

<script type="text/javascript"> 
$(function() { 
    $("table tbody tr td a").attr('href','http://www.google.com'); 
}); 
</script> 

$(function() {}); è la scorciatoia per $(document).ready(function() {});

Answer 3

Usa document.ready()

$(document).ready(function() { 
    $("table tbody tr td a").attr('href','http://www.google.com'); 
} 

È necessario assicurarsi che il documento è già caricato, prima di provare a manipolare il DOM.

Maggiori informazioni su: http://api.jquery.com/ready/

Answer 4

Il codice viene eseguito prima il DOM è pronto e l'elemento in realtà esiste, provare in questo modo:

<script> 
    $(document).ready(function(){ 
     $("table tbody tr td a").attr('href','http://www.google.com'); 
    }); 
</script> 

Il motivo per cui funziona su console è perché l'elemento <a> già esiste quando si esegue il codice ...

JSBin Demo

Answer 5

Il JS sta sparando prima che venga creato il codice HTML.

<table> 
    <tr> 
     <td><a >Hai</a></td> 
    </tr> 
</table> 
<script> 
    $(function() { 
     $("table tbody tr td a").attr('href','http://www.google.com'); 
    }); 
</script>