技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

jQuery にハマり

循環要素で add できないのは分かってるんだが、動的に追加した html の中の要素を更に動的に入れ替えようとするとアウトなんだろうか?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/core/index.js"></script>
</head>
<body>
<div id="all_contents" class="all_content">
  <div id="center_context" class="center_context">
    <div class="main_contents_cover">
      <div id="main_contents" class="main_contents">
        <div class="loading">Now loading...</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

で、main_contents に

<div id="user_add" class="current_display">
	<div class="inner_header" id="inner_header">
	    <h3>サンプル</h3>
	    <p class="caution">Caution: なんかの注意書き。</p>
	</div>

	<div class="inner_content" id="inner_content">
	    <table class="default">
	    <tbody>
	        <tr>
	            <td class="input_header">ユーザ名</td>
	            <td><input id="add_user_name" type="text"></input></td>
	        </tr>
	        <tr>
	            <td class="input_header">メールアドレス</td>
	            <td><input id="add_user_mail1" type="text"></input></td>
	        </tr>
	        <tr>
	            <td class="input_header">初期パスワード</td>
	            <td><input id="add_user_password" type="password"></input></td>
	        </tr>
	        <tr>
	            <td class="input_header">初期パスワード(確認用)</td>
	            <td><input id="add_user_password2" type="password"></input></td>
	        </tr>
	    </tbody>
	    </table>
	</div>

	<div class="inner_footer" id="inner_footer">
	    <input value="ユーザ追加" type="button" id="add_user_submit"></input>
	</div>
</div>

突っ込んで、add_user_submit の click に live でイベント割り当てて、その中の非同期通信結果

<table class="default">
    <tbody>
        <tr>
            <td class="input_header">ユーザ名</td>
            <td><input id="add_user_name" type="text" /></td>
        </tr>
        <tr>
            <td class="input_header">メールアドレス</td>
            <td><input id="add_user_mail1" type="text" /></td>
        </tr>
        <tr>
            <td class="input_header">初期パスワード</td>
            <td><input id="add_user_password" type="password" /></td>
        </tr>
        <tr>
            <td class="input_header">初期パスワード(確認用)</td>
            <td><input id="add_user_password2" type="password" /></td>
        </tr>
    </tbody>
</table>

を inner_content に突っ込もうとする。すると、

uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy"  code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"  location: "http://localhost:8080/js/jquery.js Line: 6227"]
https://plus.google.com/_/apps-static/_/js/nw/nw_i/rt=h/ver=IHYaO-2nt8E.ja./am=!zInxSsm4Ot6FfIDvNi7ZfbajDaBWw2tPh5Gu/d=1/
Line 743

イベント元のボタンは生きている筈だから、上書きによるエラーではない筈なんだが、、、、
そもそも動的に読み込まれた部分というのは、動的に変更できないものなのだろうか、、、。

絶賛ハマリ中。
もうめんどくせーからレイアウト変えちまうか。