Skonstruowczę stronę, która wykorzystuje jQuery do przypisywania obsługi zdarzeń. Teraz przypisuję zdarzenia Onclick do funkcji, ale robi stronę uruchomić skrypt, a następnie skonstruować HTML lub wykonuje stronę HTML, a następnie uruchom skrypt?

<script type="text/javascript">
    function opinionbyid(popinionid){
        $.post("index.php", {"opinionid":popinionid}, function(data){
            var data2 = JSON.parse(data);
            $(".opinion").html(data2.opinion);
            $(".note").html(data2.note);
        }, "json");
    }
    function loginform() { $(".middle").html($(".loginform").html()); }
    function registerform() { $(".middle").html($(".registerform").html()); }
    function opinionpostform() {};
    $("#loginbutton").click(function(){
        //UNSURE, MAYBE I SHOULD DO IT IN $.ready(function(){ HERE }))
    });
</script>

Lubić

$.ready(function(){ 
    $("#loginbutton").click(function(){
        // code...
    });
})

Do tej pory zwykle używałem znaczników skryptów w sekcji głowy. Dlatego myślę, że powinienem użyć $

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:5px; cursor:pointer; }
  p.hilite { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>
<script>
    $("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });
</script>

</body>
</html>

Po rozwiązaniu EDIT: W końcu pomyślałem: "Dlaczego tak postępuję z imprezami z scenariuszem?" teraz używam

onClick="dosomething()"

Właściwości przycisku. Nie musisz niczego komplikować.

3
Uğur Gümüşhan 7 grudzień 2011, 19:12

4 odpowiedzi

Najlepsza odpowiedź

Strony HTML są analizowane od góry w dół. Parsowanie JS blokuje parsowanie HTML, dopóki JS został wykonany:

<div id="foo">Foo</div>
<script>
  $('#foo').click(..) //will work because #foo exists in the dom already
  $('#bar').click(..) //wont work because #bar doesn't exist in the dom yet
</script>
<div id="bar">Bar</div>

Jeśli przymocujesz swoje skrypty tuż przed {x0}}, nie musisz czekać na document.ready, ponieważ jesteś zasadniczo tam już.

Jeśli dołączasz swoje skrypty w <head>, musisz poczekać na document.ready, ponieważ żadna z doma nie została przeanalizowana, gdy kod zostanie wykonany.

Jeśli robisz modułowy kod, a nie jesteś pewien, gdzie zostanie dodany, poczekaj na document.ready przed wiązaniem, aby bezpiecznie nie ma znaczenia, gdzie dodaje się skrypt.

Jeśli pracujesz z treścią dynamiczną, lub po prostu nie chcesz dodawać obsługi document.ready, możesz użyć live (przestarzałe od 1,7) lub on:

//pre 1.7
$('#foo').live('click', ...);
$('#bar').live('click', ...);

//post 1.7
$(document).on('click', '#foo', ...);
$(document).on('click', '#bar', ...);

Ten format przekazuje słuchacza zdarzeń do obiektu document, który istnieje w momencie wykonania. JQuery zajmie się kontekstem za scenami, aby wykonać wszystko w kontekście selektora dostarczonego w drugim argumencie.


W boku, upewnij się, że jQuery do $ przed użyciem, jeśli planujesz ponowne wykorzystanie kodu z innymi bibliotekami. Skrót {X2}}}} jest jednym z najlepszych sposobów na to:

jQuery(function ($) {
  //document.ready
});

Alternatywnie, użyj samodzielnego wykonywania zamknięcia:

(function ($) {
  //code here
}(jQuery));
6
zzzzBov 7 grudzień 2011, 15:26

$("#loginbutton").click() musi być w $.ready(function(){})

Lub

$(function() {
     $("#loginbutton").click(/*body*/)
})
0
Naftali aka Neal 7 grudzień 2011, 15:25

Skrypty są uruchamiane, gdy tylko znacznik skryptu jest uszkodzony podczas analizowania, więc zależy to od tego, gdzie znajduje się znacznik skryptu.

Jeśli umieścisz skrypt na sekcji <head>, będzie działać przed przenikniętą i skonstruowaniem ciała, dzięki czemu jesteś zmuszony do użycia $.

<html>
<head>
   <script> /* div foo is not created yet, must use $ready*/ </script>
</head><body>
   <div id="foo"></div>
</body>
</html>

Z drugiej strony, jeśli umieścisz skrypt na końcu ciała, odpowiednie divy zostaną już utworzone.

<html>
<head>
</head><body>
   <div id="foo"></div>
   <script> /* div foo already exists at this point*/ </script>
</body>
</html>

W każdym razie zazwyczaj jest dobrą praktyką do opakowania Cię obsługę w $ .ready, dla spójności i dodatkowego bezpieczeństwa.

0
hugomg 7 grudzień 2011, 15:17

Tag <script> jest odczytywany i wykonywany jako obciążenia strony - więc jeśli umieścisz znaczniki <script> na dole strony, uruchomi się po załadowaniu całej strony.

Istnieje kilka zdarzeń, które występują podczas / po załadowaniu strony - jeden z nich jest wyzwalany, gdy dom jest gotowy ... w jQuery możesz wykonać funkcje, gdy zdarzenie jest wyzwalane przy użyciu:

$(document).ready(function() {
// your code here
});

Dokumenty są tutaj na tej funkcji wyodrębnić się, na której funkcji należy użyć:

Wszystkie trzy z poniższych składni są równoważne:

  • $ (Document) .Ready (Handler)
  • $ (). Gotowy (Handler) (nie jest to zalecane)
  • $ (Handler)

Każdy kod w tej funkcji jest wykonywany po załadowaniu całej strony. Zapewnia to, że tworzone maszyny obsługiwanie zdarzeń są rzeczywiście związane, ponieważ obiekt znajduje się w dokumencie.

0
Manse 7 grudzień 2011, 15:18