JQuery - Events: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „Es gibt eine ganze Reihe von Events. Wenn ein Event eintrifft soll irgend etwas passieren. Wenn z.B. das Event click bei einem Button eintrifft soll evtl. eine …“)
 
Zeile 20: Zeile 20:
 
   alert('Handler for .change() called.');
 
   alert('Handler for .change() called.');
 
});
 
});
 +
</pre>
 +
  <select name="sweets" multiple="multiple">
 +
    <option>Chocolate</option>
 +
    <option selected="selected">Candy</option>
 +
 +
    <option>Taffy</option>
 +
    <option selected="selected">Caramel</option>
 +
    <option>Fudge</option>
 +
    <option>Cookie</option>
 +
 +
  </select>
 +
  <div></div>
 +
<script>
 +
    $("select").change(function () {
 +
          var str = "";
 +
          $("select option:selected").each(function () {
 +
                str += $(this).text() + " ";
 +
              });
 +
          $("div").text(str);
 +
        })
 +
        .change();
 +
</script>
 +
<pre>
 +
 
</pre>
 
</pre>

Version vom 19. Oktober 2012, 20:26 Uhr

Es gibt eine ganze Reihe von Events. Wenn ein Event eintrifft soll irgend etwas passieren.

Wenn z.B. das Event click bei einem Button eintrifft soll evtl. eine Funktion ausgeführt werden.

Traditionell kann man das z.B. so machen:

<input class="button" id="loadMaps" type="button" value="Load Maps" onclick="loadMaps();">

Wenn es viele Buttons werden kann das viel Aufwand bedeuten und der Code ist überall im HTML verteilt. jQuery kann man so etwas sehr schick lösen.

$(".button").click(function() {
  alert("Handler for .click() called.");
});

Für eine Selectbox kommt z.B. der change Event in Frage:

$('.target').change(function() {
  alert('Handler for .change() called.');
});
 <select name="sweets" multiple="multiple">
   <option>Chocolate</option>
   <option selected="selected">Candy</option>
   <option>Taffy</option>
   <option selected="selected">Caramel</option>
   <option>Fudge</option>
   <option>Cookie</option>
 </select>

<script>

   $("select").change(function () {
         var str = "";
         $("select option:selected").each(function () {
               str += $(this).text() + " ";
             });
         $("div").text(str);
       })
       .change();

</script>