Cum să încarci un script jQuery ultimul?

Question

Cum să încarci un script jQuery ultimul?

2 apr. 2012, 06:30:34

Vizualizări: 20.7K

Voturi: 2

Cum pot face acest script să se încarce ultimul?

 <script type="text/javascript">
  jQuery(document).ready(function(){
   jQuery("div.domTip_tipBody").mouseover(function(){
   jQuery("#yyy a.tippy_link").css("background-color","galben");});  

   jQuery("div.domTip_tipBody").mouseout(function(){
   jQuery("#yyy a.tippy_link").css("background-color","rosu");
 }); 
 });  
 </script>

Se execută înainte ca "div.domTip_tipBody" să fie rulat (care este generat de un shortcode) așa că nu se întâmplă nimic.

Am încercat:

<script src="script.js" type="text/javascript" defer="defer"></script>

în header.php înainte de

</head>

dar nu ajută.

Am văzut "window.onload =" dar nu sunt sigur cum să-l aplic.

Orice sugestie este apreciată.

Mulțumesc

xyz

215

jquery anteturi

Comentarii

Folosește wp_footer pentru a plasa acest lucru în zona de subsol. Citește cum: http://codex.wordpress.org/Plugin_API/Action_Reference/wp_footer

Rutwick Gangurde

2 apr. 2012 06:35:01

Toate răspunsurile la întrebare

Pune codul într-un fișier numit your_name.js.

Adaugă următoarele în fișierul tău functions.php:

function wpse47618_load_script_last()
{
    wp_enqueue_script( 'zzz_your_name', get_stylesheet_directory_uri().'your_name.js', array( 'jquery' ), '0', true );
}
add_action( 'wp_enqueue_scripts', 'wpse47618_load_script_last', 99999 );

Verifică codul sursă al paginilor tale dacă scriptul a fost adăugat cu succes și dacă calea către fișier este corectă. Dacă folosești FireBug sau alte instrumente de dezvoltare, dă click pe numele fișierului și verifică dacă conținutul scriptului este acolo.
Ai terminat.

kaiser

50.8K

2 apr. 2012 07:09:37

Comentarii

Mulțumesc Kaiser, acest lucru a pus scriptul în partea de jos, din anumite motive js încă nu citește selectorii generați de shortcode, dar funcționează pentru orice altceva!

xyz

2 apr. 2012 17:11:14

Nicio problemă. Reține că aceasta ar fi o întrebare pentru SO (Stack Overflow). Aș încerca să folosesc simplu consola din FireBug/Chrome dev bar/IE dev tools, etc. Scrie doar console.log( jQuery( 'div' ) ); și vei vedea dacă selecția a funcționat.

kaiser

2 apr. 2012 17:13:20

Kaiser, nu știam despre această funcționalitate, mulțumesc. Când o folosesc văd aceste elemente: div#domTip_tipBox.domTip_Tip, div#this.tipHeader.domTip_tipHeader, div#this.tipBody.domTip_tipBody

xyz

2 apr. 2012 19:39:21

Ignoră cele de mai sus. Kaiser, mulțumesc pentru răspuns, nu știam despre această funcționalitate, apreciez. Când o folosesc, văd că apar acestea div#domTip_tipBox.domTip_Tip, div#this.tipHeader.domTip_tipHeader, div#this.tipBody.domTip_tipBody - dacă dau click pe ele, mă duc la selectorii CSS. Am încercat să folosesc output-ul "raw" de mai sus și selectorii CSS la care mă redirecționează, dar niciunul nu este citit de JS. Există ceva ce poate fi făcut pentru a ajuta JS să citească acești selectori?

xyz

2 apr. 2012 19:48:24

Cum am spus: Asta e o întrebare pentru SO (Stack Overflow). Dar oricum: Dacă poți să-i selectezi acolo, atunci ei funcționează. Poți de asemenea să plasezi console.log() direct în scriptul tău și să vezi rezultatul în consolă. Asta dovedește că scriptul funcționează. Apoi, problema e altceva. Așadar: Încearcă și dacă nu merge -> SO.

kaiser

2 apr. 2012 21:11:46

Aceasta pare a fi o problemă de delegare a evenimentelor în jQuery. Dacă elementele DOM noi sunt adăugate după încărcarea paginii, jQuery nu le va recunoaște. Prin urmare, trebuie să specifici jQuery în prealabil să lege un eveniment dacă există sau vor exista astfel de elemente în viitor.

Încearcă: $.delegate('div.domTip_tipBody','mouseover', function(e){ jQuery("#yyy a.tippy_link").css("background-color","yellow");}); });

Vezi http://api.jquery.com/delegate/, http://lab.distilldesign.com/event-delegation/

rashid

223

3 apr. 2012 16:31:55

Comentarii

Bună Rashid, mulțumesc pentru răspuns. Sunt încrezător că aceasta va rezolva problema mea. Am încercat acest cod add_action('wp_footer','myscript_in_footer'); function myscript_in_footer(){ ?> $.delegate('p','mouseover', function(e){ jQuery("#yyy a.tippy_link").css("background-color","yellow");}); $.delegate('p', function(e){ jQuery("#yyy a.tippy_link").css("background-color","red"); }); });</script> <?php } Am schimbat "div.domTip_tipBody" în "p" pentru a verifica dacă funcția funcționează, dar nu merge. Poți să vezi ce trebuie schimbat ca să funcționeze?

xyz

3 apr. 2012 22:13:07

Te rog să citești acest mesaj în loc. Mulțumesc pentru răspuns. Sunt încrezător că aceasta va rezolva problema mea. Am încercat acest cod add_action('wp_footer','myscript_in_footer'); <script type="text/javascript"> jQuery(document).ready(function(){ ?> $.delegate('p','mouseover', function(e){ jQuery("#yyy a.tippy_link").css("background-color","yellow");}); $.delegate('p', function(e){ jQuery("#yyy a.tippy_link").css("background-color","red"); }); });</script> <?php } Am schimbat "div.domTip_tipBody" în "p" pentru a verifica dacă funcția funcționează, dar nu merge. Poți să vezi ce trebuie schimbat ca să funcționeze?

xyz

3 apr. 2012 22:20:18

Puteți adăuga pur și simplu scriptul în footer.php și probabil va funcționa, dar nu este cea mai bună metodă pentru a evita conflictele cu jQuery.

Cea mai bună metodă este să încărcați scriptul dintr-un fișier separat folosind funcția wp_enqueue_script. Consultați http://codex.wordpress.org/Function_Reference/wp_enqueue_script care are un parametru pentru încărcarea scripturilor în footer prin wp_footer.

Și consultați Ghidul pentru Dezvoltatori pentru JavaScript și CSS Fără Conflicte în WordPress: http://wp.smashingmagazine.com/2011/10/12/developers-guide-conflict-free-javascript-css-wordpress/

markratledge

8.74K

2 apr. 2012 06:58:17

Comentarii

Mulțumesc songdogtech, linkurile au contribuit la înțelegerea mea, apreciez. Va trebui să mă uit în js și shortcode, deoarece js nu citește output-ul shortcode-ului meu.

xyz

2 apr. 2012 17:11:33

Comentarii

Mulțumesc Rajeev, am încercat codul tău și a pus js-ul în partea de jos, acum am două metode de a face asta. Js-ul încă nu funcționează pentru rezultatul shortcode-ului meu, deci trebuie să fie altă problemă.

xyz

2 apr. 2012 17:11:26

Adăugarea directă a acestui cod în footer este o metodă greșită de a face acest lucru.

kaiser

24 apr. 2012 21:41:59

Acest lucru s-ar putea să fie 'puțin' întârziat, dar în caz că cineva încă caută:

http://css-tricks.com/snippets/jquery/run-javascript-only-after-entire-page-has-loaded/

O modalitate frumoasă și simplă de a face asta!

Sam

1

29 oct. 2013 17:38:21

Rajeev Vyas 2.52K · Accepted Answer · 2012-04-02T09:56:29Z

add_action('wp_footer','myscript_in_footer');
function myscript_in_footer(){
?>
<script type="text/javascript">
  jQuery(document).ready(function(){
   jQuery("div.domTip_tipBody").mouseover(function(){
   jQuery("#yyy a.tippy_link").css("background-color","galben");});  

   jQuery("div.domTip_tipBody").mouseout(function(){
   jQuery("#yyy a.tippy_link").css("background-color","roșu");
 }); 
 });  
 </script>
<?php
}

Rajeev Vyas

2.52K

2 apr. 2012 09:56:29