Question

我在html中有一个数量加减号框，从jQuery脚本嵌入如下。

jQuery.ajax({
                    type: "POST",
                    url: "http://ayambrand-com-my-v1.cloudaccess.host/index.php?option=com_echarity&format=raw&task=api.get_product_name",
                    data: {dataArrayPost : Data},
                    success: function(data){
                        // console.log(data);
                        var a = JSON.parse(data);
                        //console.log(a);
                        var prodName = a.productName; 
                        var splitProductName = "";
                        var prodQty = a.quota; 
                        var splitProductQuota = "";
                        var prodPrice = a.price;
                        var splitProductPrice = "";
                        var discountedPrice = "";

                        var formQuantityUpdate = "<div class='amount-controller' data-module='amount-controller'><span id='qtyminus' field='quantity' class='handle'><i class='iconfont'>-</i></span><input class='input-num' type='text' id='num' name='number'><span id='qtyplus' field='quantity' class='handle qtyPlusHandle'><i class='iconfont'>+</i></span></div>";
                        var contents = '<table id="tableDonateDisplay" class="table table-hover">';
                        contents += "<tr>";
                        contents += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
                        jQuery.each(prodName, function(index1, value1) {
                            splitProductName = value1;
                            contents += "<tr>";
                            contents += '<td>' + splitProductName;
                            jQuery.each(prodQty, function(index, value) {
                                if (index1 == index) {
                                    splitProductQuota = value;
                                    contents += '</td><td>' + splitProductQuota;
                                    jQuery.each(prodPrice, function(index2, value2){
                                        jQuery.each(value2, function(index3, value3){
                                            if(index == index2){
                                                splitProductPrice = value3.price_value_with_tax;
                                                console.log(splitProductPrice);
                                                contents += '</td><td>' + 'RM ' + splitProductPrice.toFixed(2) + '</td>';
                                                contents += '<td>' + formQuantityUpdate + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>';
                                                contents += "</tr>";
                                            }
                                        });
                                    });
                                }
                            });
                        });

                        contents += "</tr></table>";

                        if (jQuery('#contentNeed').html()) {
                            //alert('The container contains something.');
                            jQuery( "#contentNeed" ).empty();
                        }else {
                            //alert('The container is empty.');
                        }

                        jQuery('#contentNeed').append(contents);
                    }
                });

以下是jQuery用于加减函数的部分。

jQuery(document).ready(function() {
    // console.log('lulu');

    jQuery('#qtyplus').click(function(e) {
        // console.log('lala');

        e.preventDefault();

        fieldName = jQuery(this).attr('field');

        var container = jQuery(this).parents('.amount-controller');
        var currentVal = parseInt(container.children(".input-num").val());
        var val2 = currentVal + 1;

        if (!isNaN(val2)) {
            container.children(".input-num").val(val2);
        } else {
            container.children(".input-num").val(0);
        }
    });

    jQuery("#qtyminus").click(function(e) {
        e.preventDefault();

        fieldName = jQuery(this).attr('field');

        var container = jQuery(this).parents('.amount-controller');
        var currentVal = parseInt(container.children(".input-num").val());

        if (!isNaN(currentVal) && currentVal > 1) {
            container.children(".input-num").val(currentVal - 1);
        } else {
            container.children(".input-num").val(1);
        }
    }); 

    jQuery(".qtyPlusHandle").click(function(e) {
       console.log('lili');
    });
    // jQuery('span#qtyplus').on('click', function() { alert(1); });
});

在首页显示时不起作用。当我尝试在jsfiddle上运行脚本时，它可以解决任何问题。控制台上没有错误消息或任何内容。

以下是JSFiddle部分。

有人可以帮我解决这个问题吗。

Answer 1

jQuery(element).click()仅适用于已经加载的元素，但是在这里您要在ajax请求之后加载字段，因此您需要使用如下所示

jQuery（＆＃39;＃qtyplus＆＃39;）。click（function（e）{

jQuery(document).on('click','#qtyplus',function(e){

jQuery（＆＃34; #qtyminus＆＃34;）。click（function（e）{

jQuery(document).on('click', '#qtyminus', function(e) {

jQuery（＆＃34; .qtyPlusHandle＆＃34;）。click（function（e）{

jQuery(document).on('click', '.qtyPlusHandle', function(e) {

演示：https://jsfiddle.net/9qkfd688/

数量加减去不工作

1 个答案: