Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[jQuery] PreventDefault nie działa w połączeniu z delegate

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

[jQuery] PreventDefault nie działa w połączeniu z delegate

Post 07.01.2015, 00:47:50

Kod: Zaznacz cały
$().ready(function() {
   var a=0;
   $(".addMore a").on({
      click:function(e) {
         if(a==0) {
            $(".minusMore").prepend('<a href="">- Odejmij pole do wprowadzania wpływu</a>');            
         }
         
         a++;
         
         $('#addFormMoney>ul').append(
            '<li>'+
               '<p>'+(a+1)+'</p>'+
               '<div>'+
                  '<label>Podaj wartość wpływu</label>'+
                  '<input type="text" name="valueMoney[]" value="">'+
                  '<label>Wybierz kategorie wpływu</label>'+   
                  '<div>'+
                     '<h4><a href="#">Wybierz kategorie</a></h4>'+
                     '<ul>'+                                       
                        '<li><a href="">Bartons</a></li>'+
                        '<li><a href="">TLS</a></li>'+
                        '<li><a href="">kat 3</a></li>'+
                        '<li><a href="">kat 4</a></li>'+
                        '<li><a href="">kat 5</a></li>'+
                     '</ul>'+
                     '<select name="catEnter[]">'+
                        '<option value="Bartons" selected="selected">Bartons</option>'+
                        '<option value="TLS">TLS</option>'+
                        '<option value="kat 3">kat 3</option>'+
                        '<option value="kat 4">kat 4</option>'+
                        '<option value="kat 5">kat 5</option>'+
                     '</select>'+
                  '</div>'+
               '</div>'+
            '</li>'
         );
         
         e.preventDefault();
      }   
   });
   
   $(".minusMore").delegate("a","click",function(e) {
         $("#addFormMoney li").eq(a).remove();
         --a;
         if(a==0) {
            $(".minusMore").text(' ');      
         }
         e.preventDefault();   
   });   
   
   $("#addFormMoney ul").on("click","h4 a",function(e) {
      $(this).parent().next().fadeIn();
      e.preventDefault();   
   });
   
   $("#addFormMoney ul ul").on("click","li a",function(e) {
      var indexLi=$(this).parent().index();
      $(this).parent().parent().next().find("option").removeAttr("selected").eq(indexLi).attr({selected:"selected"});
      $(this).parent().parent().fadeOut();
      
      e.preventDefault();
   });
   
   $("#addFormMoney ul").on({
      click:function(e) {
         
         
         //e.preventDefault();
         //e.stopPropagation();
      }   
   });
   
   
   $("html").on({
      click:function() {
         //$("#addFormMoney ul ul").fadeOut();
      }   
   });
});
i HTML
Kod: Zaznacz cały
 <div id="right">
               <h3>Dodaj wpływ</h3>
                <p class="addMore"><a href="">+ Dodaj kolejny wpływ jednocześnie</a></p>
                <p class="minusMore"></p>
                <form method="post" action="addenter.php" id="addFormMoney">
                   <ul>
                       <li>
                           <p>1</p>
                           <div>
                                <label>Podaj wartość wpływu</label>
                                <input type="text" name="valueMoney[]" value="">
                                <label>Wybierz kategorie wpływu</label>
                                <div>
                                   <h4><a href="#">Wybierz kategorie</a></h4>
                                   <ul>                                       
                                        <li><a href="">Bartons</a></li>
                                        <li><a href="">TLS</a></li>
                                        <li><a href="">kat 3</a></li>
                                        <li><a href="">kat 4</a></li>
                                        <li><a href="">kat 5</a></li>
                                    </ul>
                                    <select name="catEnter[]">
                                        <option value="Bartons" selected="selected">Bartons</option>
                                        <option value="TLS">TLS</option>
                                        <option value="kat 3">kat 3</option>
                                        <option value="kat 4">kat 4</option>
                                        <option value="kat 5">kat 5</option>
                                    </select>
                                </div>
                            </div>
                        </li>                       
                    </ul>
                    <input type="submit" value="Dodaj nowy wpływ">
                </form>
                <?php
               echo '<pre>';
               print_r($_POST);
               echo '</pre>';
            ?>
            </div>
Najpierw za pomocą linku o selektorze "#addFormMoney ul h4 a" dodaje troche kodu HTML, czyli poleformularza typu tekstowego i seleca, którego wyłączam i styluje diva by mieć efekt ostylowanego selecta oraz 2 labele [działa]. Jeden taki zestaw jest dostepny zawsze, wybieram z opcji liste i opcja trafia do $_POST co też działa. Gdy jednak rozwine jakąś nowo dodaną liste i wybiorę jakąś opcje to strona się przeładowywuje. Tak jakby e.preventDefault nie działało. Dlaczego tak się dzieje. Z góry dziękuje za pomoc.
pytak
Posty: 100
Dołączył(a): 27.12.2008

Re: [jQuery] PreventDefault nie działa w połączeniu z delega

Post 13.01.2015, 10:04:35

Problem wynika IMO z użytego selektora
Kod: Zaznacz cały
$("#addFormMoney ul ul")

tzn. zszedłeś selektorem co najmniej jeden poziom za głęboko, ponieważ ostatni "ul" w tym selektorze dotrze do listy w "li" oznaczonym numerem 1. Więc delegując zdarzenia na ten poziom nie masz szans nasłuchiwać na zdarzenia generowane przez dynamicznie dodane elementy, ponieważ "#addFormMoney ul ul" nie jest wspólnym rodzicem wszystkich dynamicznie dodawanych elementów.

Zmień selektor na np.

Kod: Zaznacz cały
$("#addFormMoney").on("click","ul ul li a",function(e) {
Dziękuję wszystkim za lata współpracy, ciekawych pytań i dyskusji. Będę wspominał to forum z wielkim sentymentem • kukawski.pl
Avatar użytkownikakuku
Rafał Kukawski

410 Gone
410 Gone

Posty: 19896
Dołączył(a): 14.04.2002


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

Subskrypcja

Mamy 54858 zarejestrowanych użytkowników.
Najnowszy użytkownik: nanoxl


Nasi użytkownicy napisali:

  • 942274 wiadomości
  • w 251265 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)