运行jquery后form标签消失

Question

我是 jQuery 新手。 我尝试在用户选择它时更改 div 的内容。 此 div 与 wordpress/woocommerce 的支付网关之一有关。 我使用这个 add_action 来做到这一点：woocommerce_review_order_before_payment 我正在尝试根据用户输入（每张支票的期限、总金额、每张支票的金额和支票数量）显示分期付款结果。

此信息取自与用户数据一起调用的 PHP 文件。 （该文件已经过测试并且工作正常。）这是例如链接： http://******/calc/calc.php?Amont=100000&Period=3&InstallmentCount=12

现在，当我选择“检查选项”并按下提交按钮时，不是通过 Ajax 发送数据，而是将整个页面发送到服务器。检查代码后，我发现选择此选项时，所有代码都会添加到所需的div中，但不会添加此代码集开头的form标签，这是“Chrome检查”的结果：

<div class="payment_box payment_method_cheque" style="">
    <table align="center" style="width:40%;text-align:center;margin: 0 auto;">
        <tbody>
            <tr>
                <td style="text-align:center">
                    <input type="hidden" name="Amont" id="ch_amont" value="7350000">
                    <label>Period:</label><br>
                    <select name="Period" id="ch_period">
                        <option value="1">1 month</option>
                        <option value="2">2 months</option>
                        <option value="3">3 months</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="text-align:center"><br>
                    <label>Number of installment</label><br>
                    <select name="InstallmentCount" id="ch_inst">
                        <option value="6">6 months</option>
                        <option value="12">12 months</option>
                        <option value="18">18 months</option>
                        <option value="24">24 months</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="text-align:center"><br>
                    <input type="submit" class="button" name="submit_btn" id="submit_btn" value="Calculate my installment">
                </td>
            </tr>
        </tbody>
    </table>
    <div id="server-results"><!-- For server results --></div><br>
</div>

如您所见，其中没有表单标签： <form id="my_form" method="POST" onsubmit="event.preventDefault();_cal_Function();"> 此行省略。

我尝试通过“Chrome浏览器检查”手动添加此行，但添加后它消失了，并且控制台中没有错误。 这是整个代码：

add_action( 'woocommerce_review_order_before_payment', 'refresh_payment_methods' );

function refresh_payment_methods(){
    global $woocommerce, $product;
    ?>

    <script type="text/javascript" charset="utf-8">
        (function($){
            $( 'form.checkout' ).on( 'change', 'input[name^="payment_method"]', function(event) {
                var payment_method = $('form.checkout').find('input[name^="payment_method"]:checked').val();
                if(payment_method == 'cheque'){
                    var theText = '<form id="my_form" method="post" onsubmit="event.preventDefault();_cal_Function();">';
                    theText += '<table align="center" style="width:40%;text-align:center;margin: 0 auto;"><tbody><tr><td style="text-align:center">';
                    theText += '<input type="hidden" name="Amont" id="ch_amont" value="<?php echo $woocommerce->cart->total; ?>">';
                    theText += '<label>Period:</label><br/>';
                    theText += '<select name="Period" id="ch_period"><option value="1">Every 1 month</option><option value="2">Every 2 months</option><option value="3">Every 3 months</option> </select>';
                    theText += '</td></tr><tr><td style="text-align:center">';
                    theText += '<br/><label>Number of installment</label><br/>';
                    theText += '<select name="InstallmentCount" id="ch_inst"><option value="6">Every 6 months</option><option value="12">Every 12 months</option><option value="18">Every 18 months</option><option value="24">Every 24 months</option></select>';
                    theText += '</td></tr><tr><td style="text-align:center">';
                    theText += '<br/><input type="submit" class="button" name="submit_btn" id="submit_btn" value="Calculate my installment" >';
                    theText += '</td></tr></tr></tbody></table>';
                    theText += '</form>';
                    theText += '<div id="server-results"><!-- For server results --></div><br/>';

                    $( "div.payment_method_cheque" ).html( theText );

                }else{
                    $('body').trigger('update_checkout');
                }
            });
        })(jQuery);
    </script>
    <script type="text/javascript" charset="utf-8">
        function _cal_Function() {
            document.getElementById("server-results").innerHTML = "Calculating...";
            var _ch_amont  = document.getElementById('ch_amont');
            var _ch_period = document.getElementById('ch_period');
            var _ch_inst   = document.getElementById('ch_inst');

            var request = new XMLHttpRequest();
            request.open("GET", "http://*****/calc/calc.php?Amont="+_ch_amont.value+"&Period="+_ch_period.value+"&InstallmentCount="+_ch_inst.value);
            // Defining event listener for readystatechange event
            request.onreadystatechange = function() {
                // Check if the request is compete and was successful
                if(this.readyState === 4 && this.status === 200) {
                    // Inserting the response from server into an HTML element
                    document.getElementById("server-results").innerHTML = this.responseText;
                }
            };

            // Sending the request to the server
            request.send();
        }
    </script>
    <?php
}

在做了我在互联网上找到的所有测试之后，我找到了一种方法，但在这里提出问题。如果我的英语不好，请见谅，感谢您的指导。

Answer 1

我发现了问题并且可以解决它，所以这就是我所做的： $( "div.payment_method_cheque" ).html( theText ); 这条线是问题所在，而不是 html 我尝试了 replaceWith 并且运行良好。 当然，我必须在 theText 的顶部添加这一行： var theText = '<div class="payment_box payment_method_cheque" style="">'; 这个在块的末尾： theText += '</div>'; 也许jQuery对此有更好的方法，如果有人知道，我很乐意分享。