「Firefoxでclone使ったがバグった」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
一応こんな例もあるらしい。
[[FireFoxでclone使ったがバグった>http://stackoverflow.com/questions/2136002/jquery-clone-weird-behaviour-in-firefox]]
※訳(あんま得意でないですが)
◆HTML
<form name="form1" method="post" action="">
<div id="input1" class="clonedInput">
<label for="answer1" class="answer_label"> Answer: </label>
<input type="text" name="answer1" id="answer1" value="Answ1"/>
<label for="answer1pt"> Points: </label>
<input type="text" name="answer1pt" id="answer1pt" size="2" value="1"/>
◆Javascript
$('#btnAddAnswer').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.find(":nth-child(1)").attr('for', 'answer' + newNum);
newElem.find(":nth-child(2)").attr('id', 'answer' + newNum).attr('name', 'answer' + newNum).attr('value', '');
newElem.find(":nth-child(3)").attr('for', 'answer' + newNum + 'pt');
newElem.find(":nth-child(4)").attr('id', 'answer' + newNum + 'pt').attr('name', 'answer' + newNum + 'pt').attr('value', '');
$('#input' + num).after(newElem);
$('#btnDelAnswer').attr('disabled','');
if (newNum == 5)
$('#btnAddAnswer').attr('disabled','disabled');
});
◆コメント
基本的に最初のdivとそれぞれのdivのidは別の値を設定しています。
ちゃんと複製したdivはあるように見えるんですが、
formをsubmitすると最初のdivだけになってしまうんです。
ChromeとIEだとちゃんと取れるんですけど、
Firefoxだけでこの現象が発生します。
私なんかおかしいことしてますか？
FirefoxのアドオンでFirebugってのがあるから使って、
コンソール見てみて。
それはもう見てみたんですけど、HTMLは問題ないようです。
もしかしてFirefox等級のバグでしょうか。。
他の関数使った方がいいですかね？
問題解決しました！ありがとう！
でもやっぱりHTMLには問題なくって、
コンソールには何も出てませんでした。
ChromeのDevelopers Toolsで確認したら、
「div tag was inside table body」と出ました。
どうやらこれが全ての元凶らしいです。
一応こんな例もあるらしい。
[[FireFoxでclone使ったがバグった>http://stackoverflow.com/questions/2136002/jquery-clone-weird-behaviour-in-firefox]]
※訳(あんま得意でないですが)
◆HTML
<form name="form1" method="post" action="">
<div id="input1" class="clonedInput">
<label for="answer1" class="answer_label"> Answer: </label>
<input type="text" name="answer1" id="answer1" value="Answ1"/>
<label for="answer1pt"> Points: </label>
<input type="text" name="answer1pt" id="answer1pt" size="2" value="1"/>
◆Javascript
$('#btnAddAnswer').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.find(":nth-child(1)").attr('for', 'answer' + newNum);
newElem.find(":nth-child(2)").attr('id', 'answer' + newNum).attr('name', 'answer' + newNum).attr('value', '');
newElem.find(":nth-child(3)").attr('for', 'answer' + newNum + 'pt');
newElem.find(":nth-child(4)").attr('id', 'answer' + newNum + 'pt').attr('name', 'answer' + newNum + 'pt').attr('value', '');
$('#input' + num).after(newElem);
$('#btnDelAnswer').attr('disabled','');
if (newNum == 5)
$('#btnAddAnswer').attr('disabled','disabled');
});
◆コメント
基本的に最初のdivとそれぞれのdivのidは別の値を設定しています。
ちゃんと複製したdivはあるように見えるんですが、
formをsubmitすると最初のdivだけになってしまうんです。
ChromeとIEだとちゃんと取れるんですけど、
Firefoxだけでこの現象が発生します。
私なんかおかしいことしてますか？
FirefoxのアドオンでFirebugってのがあるから使って、
コンソール見てみて。
それはもう見てみたんですけど、HTMLは問題ないようです。
もしかしてFirefox特有のバグでしょうか。。
他の関数使った方がいいですかね？
問題解決しました！ありがとう！
でもやっぱりHTMLには問題なくって、
コンソールには何も出てませんでした。
ChromeのDevelopers Toolsで確認したら、
「div tag was inside table body」と出ました。
どうやらこれが全ての元凶らしいです。
