Stosowanie zdarzeń do elementów powstałych w wyniku zdarzeń

Dział poświęcony JavaScriptowi - tworzeniu dynamicznym stron WWW.
seeker
Początkujący
Początkujący
Posty: 10
Dołączył(a): piątek, 4 kwietnia 2014, 12:10

Stosowanie zdarzeń do elementów powstałych w wyniku zdarzeń

Post przez seeker »

Cześć :) Zacząłem się ostatnio zastanawiać nad pewnym zagadnieniem - otóż czy da się zastosować zdarzenie jQuery do elementu, który powstał w wyniku wywołania innego zdarzenia w tym samym skrypcie? Weźmy sobie taki kod:

Code: Zaznacz cały

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <script type="text/javascript">
        $(document).ready(function(){  

          $("#kliknij").click(function(){
          $("#pole").prepend('<div class="kliknijznow" style="cursor: pointer;">Kliknij znowu, aby zrobić alert </div>');
          });
          
        $(".kliknijznow").click(function(){
          alert("heheszki");
        });
        
      });
  </script>
</head>
<body>
     <div id="kliknij" style="cursor: pointer;">Kliknij tutaj </div>
     <div id="pole" style="width: 200px; height: 200px; border: 1px solid black; margin-top: 10px; padding: 10px"></div>
     <div class="kliknijznow" style="cursor: pointer;">Kliknij znowu, aby zrobić alert </div>
</body>
</html>
Na początku pojawia nam się napis "Kliknij tutaj", ramka diva o id "pole" i napis "Kliknij znowu, aby zrobić alert", na który jak kliknę, to oczywiście alert się wywoła. Za to jak kliknę w "Kliknuj tutaj", w ramce pole pojawi się ten sam napis z tą samą klasą. I czy jak kliknę na niego wykona się alert? Nie. Jestem ciekaw dlaczego i czy da się to jakoś obejść?
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:

Re: Stosowanie zdarzeń do elementów powstałych w wyniku zdar

Post przez Morfidon »

Hej,

Dzieje się tak ponieważ gdy dodawałeś zdarzenie to tamten element jeszcze NIE istniał.

Po dodaniu elementu musisz dodać nowe zdarzenie do dodanego elementu w identyczny sposób (najlepiej skrótem przez gotową osobną funkcje) lub też z tego co widzę dodali nową funkcje:
https://api.jquery.com/on/#on-events-se ... ta-handler
która podobno robi to za Ciebie.

Spróbuj:

Code: Zaznacz cały

$(staticAncestors).on(eventName, dynamicChild, function() {});
Pozdrawiam :)
Post Reply