Jquery клонированию и радио кнопки: странное поведение

Question

На Jsfiddle: http://jsfiddle.net/jhzux/

Я потратил много времени на этот простой сценарий .. То, что я хочу сделать, это для того, чтобы клонировать формы в JQuery, а затем сделать их работайте правильно.

В первую очередь, когда я запускаю этот код на JsFiddle он не работает, но в моем браузере это делает .. странно ... -.-

Во-вторых $(this).next(".persianaops").slideToggle(300); часть, даже не работает, ничего не происходит, только. появляется персикаверская часть

Когда появляется персикаверская часть, радиокнопка не всегда работает, в первой ячейке она работает нормально, но позже в других клонов радио ведет себя, как и каждый переключатель, принадлежит к одной и той же группе, так что это может быть только Применяется два раза: в первой части, а не в одном из клонов. (Надеюсь, вы можете увидеть это в скрипте Js, потому что мое объяснение вызывает путаницу ..)

Итак, есть ли лучший способ клонировать таблицу с JQ с рабочими переключателями и фиксировать часть .perianaops?

HTML:

<ul id="listing" style="list-style:none;"> 
    <li> 
     <table class="pedido"> 
      <tr> 
       <td><select name="product[]"> 
        <option value="0"> 
         Perfil: 
        </option> 
        <option value= 
        "68mm 5 Cámaras AD rendszer egyenes szárny, ütköző tömítéssel"> 
        68mm 5 Cámaras 7001AD, con dos juntas 
        </option> 
        <option value= 
        "68mm 7 K AD rendszer íves szárny, ütköző tömítéssel"> 
         68mm 7 Cámaras 7001AD con dos juntas 
        </option> 
        <option value= 
        "80 mm 6 K Tok + 7 K íves szárny AD rendszer, ütköző tömítéssel"> 
        80 mm Marco 6 Cámaras + Hoja de 7 Cámaras 7001AD con 
        dos juntas 
        </option> 
        <option value= 
        "68mm 7 K MD rendszer ütköző és középtömítéses, íves szárny"> 
        68mm 7 Cámaras 7001MD con tres juntas 
        </option> 
        <option value= 
        "80 mm 8 K MD rendszer ütköző és középtömítéses, íves szárny"> 
        80 mm 8 Cámaras 7001MD con tres juntas 
        </option> 
       </select></td> 
      </tr> 
      <tr> 
       <td><input class="comment" name="h[]" value="Horizontal"> x 
       <input class="comment" name="v[]" value="Vertical"> uds: 
       <input name="uds[]" style="width:60px;"></td> 
      </tr> 
      <tr> 
       <td> 
        <select> 
         <option> 
          Color 
         </option> 
        </select> Persiana <input class="persiana" name= 
        "persiana[]" type="checkbox"> 
        <div class="persianaver" style= 
        "float:right; display:none"> 
         Con motor<input name="f[]" type="radio" value= 
         "auto"> Manual<input name="f[]" type="radio" value= 
         "manual"> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td></td> 
      </tr> 
      <tr> 
       <td style="width:435px;"> 
        <div class="persianaops" style= 
        "float:right; display:none"> 
         IMPORTANTE: En caso de haber seleccionado la opción 
         persiana usted tiene que especificar el tamaño de 
         la tapa del cajón (Lugar donde se sitúa la caja de 
         persiana) Puede especificarlo en el campo 
         comentario <a href="images/demo.jpg" id="pregunta" 
         name="pregunta"><img alt="pregunta" height="15" 
         src="images/ask.jpg" width="15"></a> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <textarea class="comment" cols="59" name="comment[]" rows= 
       "5">Comentario</textarea></td> 
      </tr> 
     </table> 
    </li> 
</ul><button id="clonar" name="colnar">Cloneme</button><br> 
<br> 
<h3>Datos personales:</h3><br> 
<table> 
    <tr> 
     <td>Nombre y apellido:</td> 
     <td><input name="name" type="text"></td> 
    </tr> 
    <tr> 
     <td>Email:</td> 
     <td><input name="mail" type="text"></td> 
    </tr> 
    <tr> 
     <td>Teléfono:</td> 
     <td><input name="telefono" type="text"></td> 
    </tr> 
</table> 

JQ

$(document).ready(function() { 
    var $orig = $(".pedido").clone(); 
    $("#clonar").live('click', function(e) { 
     e.preventDefault(); 
     $("#listing").append($orig.clone()); 
     $(".persiana").click(function() { 
      $(this).next(".persianaver").slideToggle(300); 
      $(this).next(".persianaops").slideToggle(300); 
     }); 
     $(".comment").focus(function() { 
      if (this.value === this.defaultValue) { 
       this.value = ''; 
      } 
     }).blur(function() { 
      if (this.value === '') { 
       this.value = this.defaultValue; 
      } 
     }); 
    }); 
});​ 

Answer 1

А он не работает на JsFiddle; это, вероятно, не работает, потому что у вас есть возможность использовать MooTools, а не jQuery.

Что касается логики клонирования; кажется, он должен работать; хотя мне кажется странным, что вы «клонируете» переменную после события «clickclan», в отличие от использования переменной для выполнения события clone и получения нового содержимого.

Я хотел бы изменить его к этому:

$(document).ready(function() 
{ 
     var $orig = $(".pedido").clone(); 

     $("#clonar").live('click' , function(e){ 
      e.preventDefault(); 
      $("#listing").append($orig); 
      // or the non variable instance: 
      // $("#listing").append($("#pedido").clone();) 
     }); 
}); 

Answer 2

Я установил вашу скрипку для вас: http://jsfiddle.net/8v6CP/1/.

Вам не пришло резюме }) и ваш код не совпадает с кодом </tr>. Я предлагаю вам отступы вашего кода, чтобы избежать такой проблемы.

Что касается ".persiana" checkbox, вы, где есть событие click внутри обработчика событий "#clonar". Вы должны закрепили ее снаружи с помощью live:

$(document).ready(function(){ 
    var $orig = $(".pedido").clone(); 

    $(".persiana").live("click", function() { 
     $(this).next(".persianaver").slideToggle(300); 
     $(this).next(".persianaops").slideToggle(300); 
    }); 

    $("#clonar").live('click', function (e) { 
     e.preventDefault(); 
     $("#listing").append($orig.clone()); 

     $(".comment") 
      .focus(function() { 
       if (this.value === this.defaultValue) { 
        this.value = ''; 
       } 
      }) 
      .blur(function() { 
       if (this.value === '') { 
        this.value = this.defaultValue; 
       } 
      }); 
    }); 
}); 

Answer 3

Я бы реструктурировать это полностью. См. Пример. Вы являетесь двойными событиями привязки, добавляя click событий внутри оператора live.

Здесь я использую вместо этого on. Я контролирую уровень тела, но вы должны затянуть его до контейнера формы или формы для повышения производительности. Просто объявляйте обработчики событий один раз, используя on.

Затем клонировать клон - это только одна строка. Вам не нужно препятствовать кнопкам по умолчанию, потому что по умолчанию ничего не делает.

Радиокнопки клонированы, и поэтому они имеют одно и то же имя. Это означает, что только одна из переключателей может быть активна одновременно.Я добавил код для их переименования.

http://jsfiddle.net/jhzux/3/

$(document).ready(function() { 
    var $orig = $(".pedido").clone(); 
    var counter = 0; 

    $("body").on('click', '.persiana', function() { 
     $(this).next(".persianaver").slideToggle(300); 
     $(this).next(".persianaops").slideToggle(300); 
    }); 

    $("body").on('focus', '.comment', function() { 
     if (this.value === this.defaultValue) { 
      this.value = ''; 
     } 
    }).on('blur', '.comment', function() { 
     if (this.value === '') { 
      this.value = this.defaultValue; 
     } 
    }); 

    $("#clonar").click(function(e) { 
     //have to change radio button names to be unique 
     counter++; 
     $orig.find(':radio').each(function() { 
      $(this).prop('name', $(this).prop('name') + counter); 
     }); 

     //append clone 
     $("#listing").append($orig.clone()); 
    }); 
});​