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

[pehaperowiec]

Kod

$().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

[HTML] pobierz, plaintext 
 <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>
[HTML] pobierz, plaintext 

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.

Ten post edytował pehaperowiec 7.01.2015, 00:53:05

[Turson]

http://stackoverflow.com/questions/1937114...reated-elements

[pehaperowiec]

Jeśli dobrze rozumie, to powinienem przypisać zdarzenie click do jakiegoś istniejącego rodzica (czyli nie dodawanego przez append()). No to zmieniam:

Kod

$("#addFormMoney ul ul").on("click","li a",function(e) {

na

Kod

$("#addFormMoney ul").on("click","ul li a",function(e) {

no ale niestety dalej jest to samo. Mógłbyś mi dokładniej wyjaśij w czym tkwi problem?

[Turson]

Daj jakiś alert zeby w ogole sprawdzic czy event sie wykonuje

[pehaperowiec]

tak, alert działa

[Turson]

Spróbuj z

Kod

return false;

zamiast

Kod

e.preventDefault();

[pehaperowiec]

Próbowałem już wcześniej i z return false, stopPropagination i preventDefault i dalej nic

Kod

$('#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>'
            );

Zagnieżdżona lista

[trueblue]

Na pewno nie działa $("#addFormMoney ul").on("click","ul li a".... ?

http://jsfiddle.net/5rv8s7p8/

[pehaperowiec]

http://jsfiddle.net/5rv8s7p8/1/

Żapisz sobie na kompie, bo jsFiddle jest całkiem inny efekt. Input[type="submit"] powinien być na samym dole, a kolejne elementy listy powinny być dodawane między pierwszą pozycją listy a tym submitem. Ponadto na jsFiddle zauważyłem ciekawą rzecz. Pierwszym razem, na nowo dodanym elemencie działa zmiana wartości listy - przypisanie wartości do selecta a za drugim już nie. Zobacz to najlepiej offline

[trueblue]

Przykład, który podałeś działa bez problemu offline.
Czy tam submit jest w odpowiednim miejscu?