jQuery after方法动态添加的元素没有默认值和绑定的事件失效？

Question

html代码

                     <tr>
                        <th colspan="6" style="text-align: left;">创始董事
                            <a class="btn btn-primary pull-right director_add"> 添加董事</a>&nbsp;&nbsp;
                        </th>
                    </tr>
                <tbody class="director_form">
                    <tr>
                        <td class="tdleft" width="10%">中文姓名:</td>
                        <td width="20%">
                            <input  type="text" name="director_cn_name" id="director_cn_name" />
                            <i class="dealdone" aria-hidden="true">*</i>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdleft" width="10%">付款银行:</td>
                        <td width="20%">
                            <select id="director_payment_method" name="director_payment_method">
                                <option value="1">恒生银行</option>
                                <option value="2">渣打银行</option>
                            </select>
                            <i class="dealdone" aria-hidden="true">*</i>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdleft" width="10%">是否含税金:</td>
                        <td colspan="2" width="35%">
                            <input  type='radio' name='director_tax' id="director_tax1"  class="director_tax"  value='1'/>&nbsp; 是 &nbsp;
                            <input  type='radio' name='director_tax' id="director_tax"   class="director_tax"  value='0' checked/>&nbsp; 否 &nbsp;
                        </td>
                        <td class="tdleft director_tax_amount" width="10%" style="display: none;">税金金额:</td>
                        <td class="director_tax_amount" colspan="2" width="35%" style="display: none;">
                            <input type="text" name="director_tax_amount" id="director_tax_amount"/>
                            <i class="required" aria-hidden="true">*</i>
                        </td>
                    </tr>
                    </tbody>

我点击添加董事的按钮后执行：

        $(".director_add").click(function () {
            $(".director_form").after($(".director_form").html());
        });

选择是否含税金的时候执行：

    $('.director_tax').on('change', function(){
            if ($(this).val() == '1') {
                $('.director_tax_amount').show();
            } else {
                $('.director_tax_amount').hide();
            }
        });

遇到的问题：

1:id为director_tax的单选框默认值为0.在动态生成的元素里面没有默认值？
2: 当是否含税金的值为1的时候，在动态生成的元素里面这个时间不生效？

请问这是什么原因呢，求大神解答，谢谢。

Answer 1

1. 代码没看……太乱了，逻辑择不清楚……
2. 建议把数据和UI拆开，你现在是写在一起的，当你UI很复杂、逻辑很多时，出来个bug都没人帮你，……因为除了你没人看得懂代码……
3. 动态生成的DOM元素，绑定事件一般用事件代理，或者在添加完load事件后再挂事件。
4. after那里好像是有点问题的，因为你$()一个类的时候，返回给你的必然是一个jQ对象集合，对一个集合用.html()再反向写进去……建议你可以先clone再insertAfter吧，另外绑事件也注意一下。