Elements that are dynamically added by the jQuery after method have no default values and events that are bound to expire?

html Code
                     <tr>
                        <th colspan="6" style="text-align: left;">
                            <a class="btn btn-primary pull-right director_add"> </a>
                        </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"/>  
                            <input  type="radio" name="director_tax" id="director_tax"   class="director_tax"  value="0" checked/>  
                        </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>

I click the button to add a director and execute:

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

execute when choosing whether or not to include tax:

    $(".director_tax").on("change", function(){
            if ($(this).val() == "1") {
                $(".director_tax_amount").show();
            } else {
                $(".director_tax_amount").hide();
            }
        });
problems encountered:
The default value of the radio box where

1:id is director_tax is 0. There are no default values in dynamically generated elements?
2: when the tax value is 1, this time does not take effect in dynamically generated elements?

what is the reason for this? ask the Great God for an answer. Thank you.

Mar.17,2021

    The
  1. code didn't look. It's so messy that the logic is not clear.
  2. it is recommended to separate the data from the UI, you are now writing together, when your UI is very complex, a lot of logic, there is no one to help you with a bug. Because no one can understand the code but you.
  3. dynamically generated DOM elements, binding events usually use event proxies, or hang events after adding load events.
  4. There seems to be a problem with
  5. after, because when you $() a class, it must be a collection of jQ objects returned to you, and then write it backwards with .html () for a set. It is suggested that you can first clone and then insertAfter it, and pay attention to the binding event.
Menu