Question

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

我的问题是：加载新表单后（通过.html()）我的所有jquery都不起作用。例如，捐赠的价格是无线电领域，并且在更改时它会在订单审查中填充范围。表单加载后，所有这些都不起作用。

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

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()代码之后调用该函数。

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

在ajax加载后填充字段

2 个答案: