jQuery insertAfter在复杂的fieldset结构中不起作用

Question

我的代码：

<fieldset id="financial" class="fieldset">
    <legend class="fieldset_legend hidden">Finanzielles</legend>
    <div id="ahv_number_div" class="fieldwrapper">
        <label for="ahv_number" class="label">AHV-Nummer</label>
        <input type="text" name="ahv_number" id="ahv_number" value="" class="field textfield" aria-required="true" required="" \="">
    </div>
    <div id="wage_type">
        <p>Lohnart</p>
        <div id="wage_type_1_div" class="fieldwrapper">
            <label for="month_wage" class="label">Monatslohn</label>
            <input type="radio" name="wage_type" id="month_wage" value="month_wage" class="radio" aria-required="true" required="" \="" aria-describedby="wage_type-error wage_type-error wage_type-error">
        </div>
        <div id="wage_type_2_div" class="fieldwrapper">
            <label for="hour_wage" class="label">Stundenlohn</label>
            <input type="radio" name="wage_type" id="hour_wage" value="hour_wage" class="radio" aria-required="true" required="" \="" aria-invalid="false">
        </div>
    </div>
    <div id="wage_amount_div" class="fieldwrapper" data-assign="wage_type" data-parent="financial">
        <label for="wage_amount" class="label">Lohnbetrag</label>
        <input type="text" name="wage_amount" id="wage_amount" value="" class="field slider" aria-required="true" required="" \="">
        <div id="slider-wage_amount" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
            <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
        </div>
    </div>
    <div id="wage_amount_type">
        <p>Lohnbetragsart</p>
        <div id="wage_amount_type_1" class="fieldwrapper">
            <label for="gross" class="label">Brutto</label>
            <input type="radio" name="wage_amount_type" id="gross" value="gross" class="radio" aria-required="true" required="" \="">
        </div>
        <div id="wage_amount_type_2" class="fieldwrapper">
            <label for="net" class="label">Netto</label>
            <input type="radio" name="wage_amount_type" id="net" value="net" class="radio" aria-required="true" required="" \="">
        </div>
    </div>
    <div id="identification_number_div" class="fieldwrapper">
        <label for="identification_number" class="label">Ausweisnummer</label>
        <input type="text" name="identification_number" id="identification_number" value="" class="field textfield" aria-required="true" required="" \="">
    </div>
    <div id="expiry_date_div" class="fieldwrapper">
        <label for="expiry_date" class="label">Ausweis Ablaufdatum</label>
        <input type="text" name="expiry_date" id="expiry_date" value="" class="field textfield datepicker" aria-required="true" required="" \="">
    </div>
    <div id="annual_quota_div" class="fieldwrapper">
        <label for="annual_quota" class="label">Jahreskontigent Ferientage</label>
        <input type="number" name="annual_quota" id="annual_quota" value="" class="field slider" min="0" max="100" step="1" aria-required="true" required="" \="">
    </div>
</fieldset>

使用Javascript：

$('#wage_type input[type=radio]').click(function () {
    if(this.checked){
        var module      =   $(container).find('form').attr('data-module');
        var slidertype  =   $(this).val();
        var fieldname   =   $('div[data-assign=wage_type]').find('input').attr('id');
        var assignfield =   $('div[data-assign=wage_type]').attr('id');
        var fielddatas  =   '&f_datas[]='+slidertype;
        var fieldkeys   =   '&f_keys[]=slidertype';
        var after       =   '#wage_type';

        // remove old field
        $('script.'+fieldname).remove();
        $('#'+assignfield).remove();

        // add new field
        ajax_field(module, fieldname, fieldkeys, fielddatas, after);
    }
});

function ajax_field(module, fieldname, fieldkeys, fielddatas, after) {
var ajax_datas  =   'module=' + module + '&f_name=' + fieldname + fieldkeys + fielddatas + '&modus=one_field';
$.ajax({
    type: 'post',
    url: forms_url + 'post_field/',
    data: ajax_datas,
    success: function (data) {
        var fielddata = $.parseJSON(data);
        $(after).after(fielddata.field);
        $('head').append(fielddata.script); 
    }
});

}

DIV #wage_amount是一个滑块，我有两种类型的工资。所以我想根据工资类型更改滑块设置。对我来说最好的想法是删除DIV #wage_amount和他的javascript，并通过AJAX获得一个新的。代码工作得很好，但我想在DIV #wage_type之后插入新的DIV，这不适用于.after和.insertAfter。 ＆＃34; fielddata.field＆＃34;是新DIV的HTML代码。

为什么.after和.insertAfter不起作用？

Answer 1

选择器“#wage_type”已损坏。我更改名称，工作正常。