jQueryのクローニングおよびラジオボタン：奇妙な行動

Question

Jsfiddleオン：http://jsfiddle.net/jhzux/

私はこの単純なスクリプトで多くの時間を無駄にした...私は何をしたいのjQueryでフォームのクローンを作成することを可能にし、それらを作ることです正しく動作します。私はそれが動作しませんが、私のブラウザでは、奇妙な..ないJsFiddleにこのコードを実行する最初の場所で

...

-.-は、第二$(this).next(".persianaops").slideToggle(300);部分でも動作しませんが、何にのみ発生しません。ペルシャーバー部分が表示されます

ペルシャーバー部分がラジオボタンに作用するとは限りませんが、最初のセルでは正常に機能しますが、後で他のクローンではラジオボタンが同じグループに属するようにラジオボタンが動作します2回使用：最初の部分と1つのクローンの中で..（私のexpnatationはちょっと混乱しているので、私はあなたがJsのフィドルでこれを見ることができます。）

JQでテーブルをクローンしてラジオボタンを操作し、.persianaopsの部分を修正する方法がありますか？

HTML：それはJsFiddle上で動作していないためとして

<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

。 jQueryではなくMooToolsを使用するように設定されているため、おそらく動作しません。

クローニングロジックについては、それはうまくいくはずです。クローンイベントを実行して新鮮なコンテンツを取得するために変数を使用するのではなく、 "＃clonar"クリックイベントの後で変数を "クローン"しているのが奇妙なことがわかります。

私はこのように変更します：

$(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/。

})の一部が欠けていて、HTMLに</tr>がありませんでした。私はこの種の問題を避けるためにコードをうまくインデントすることをお勧めします。

".persiana"のチェックボックスについては、"#clonar"イベントハンドラ内にclickイベントを添付する場所があります。 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

これを完全に再構成してください。例を参照してください。 liveステートメント内にclickイベントを追加することで、二重バインドイベントになります。

ここで私は代わりにonを使用します。私はボディレベルを監視しますが、パフォーマンスを向上させるにはフォームコンテナまたはフォームにしっかりと締めてください。一度だけonを使ってイベントハンドラを宣言してください。

次にクローンをクローン化するのは1行だけです。デフォルトでは何も起こらないので、デフォルトのボタンを防ぐ必要はありません。

ラジオボタンは複製されているため、同じ名前を共有します。つまり、一度に1つのラジオボタンしかアクティブにできません。名前を変更するコードをいくつか追加しました。

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()); 
    }); 
});​