Ajax加载后填充字段

Question

我有一个表格，允许用户使用单选按钮通过信用卡或Paypal付款，当他们分别单击每个按钮时-正确的表格通过ajax加载。

我的问题是：加载新表单（通过.html() ）后，我所有的jquery无法正常工作。 例如，捐赠的价格是一个无线电字段，更改后它会填充一个跨度以进行订单审查。 表单加载后，所有这些都不起作用。

我也在使用floatlabel.js ，它在加载的表单上也不起作用。

的jsfiddle

HTML-捐款金额

    <input type="radio" name="amounts" value="3000"><span class="radio-span">$3000</span>
    <input type="radio" name="amounts" value="1800"><span class="radio-span">$1800</span>
    <input type="radio" name="amounts" value="500"><span class="radio-span">$500</span>
    <input type="radio" name="amounts" value="360"><span class="radio-span">$360</span>
    <input type="radio" name="amounts" value="180"><span class="radio-span">$180</span>
<input type="radio" name="amounts" value="other" id="other"><span class="radio-span radio-span-other">Other</span> <input type="text" name="other_amt" class="other-amt"/>

HTML付款方式

<input type="radio" class="radio-cc" name="method" value="creditcard"><span class="radio-span">Credit Card</span>
<input type="radio" class="radio-paypal"  name="method" value="paypal"><span class="radio-span">Paypal</span>

HTML-订单审核（以ajax加载形式）

<div class="order-review">
<span class="amount"></span>
</div>

jQuery-按顺序填充跨度

    $("input[name=amounts]").change(function (e) {

    if ($(this).val() == 'other') {
        $("input[name=other_amt]").bind("change paste keyup", function() {
        $("input.hidn-amt").val( '$'+$(this).val());
        $("span.amount").val( '$'+$(this).val());
    });
    }else{
       var selected = $("input[name=amounts]:checked");
        $("input.hidn-amt").val( '$'+selected.val());
        $("span.amount").val( '$'+$(this).val());
    }

});

Answer 1

由于新字段是通过AJAX加载的，因此事件绑定将丢失。 您可以使用.delegate（）来防止这种情况。

 $(document).delegate('input[name="amounts"]', 'change', function (event) {
   // code here
 })

我相信您也可以以类似的格式使用.on() ，只要您将文档用作选择器即可。

Answer 2

您的jQuery在AJAX请求完成之前运行，因此它不适用于稍后获取的新元素。

您可以将整个绑定包装在函数包装中，也许将其initForms() ，然后在.html()代码之后调用该函数。

如果您想看看，还有更多方法可以使用$("body").on jQuery语法自动绑定元素。