Question

我无法使用jQuery来增加价格和数量。

这是我完整的custom.js文件：

$(document).ready(function()
{   

    $("#frm1").validate({
        rules:
        {
            tx1:
            {
                required : true,
                rangelength: [10, 10],
                digits: true
            }
        },
        messages:{
            tx1:
            {
                required: "Mobile Number is needed."
            }
        }               
    });

    $("#add").click(function add_txt()
    {
        var ta = document.getElementById("ta1");
        var tx = document.getElementById("tx1");

        if(ta.value == "")
            ta.value += tx.value;
        else
            ta.value += ", " + tx.value;

        tx.value = "";
        tx.focus();
    });

    $("#cross").bind('click',function product()
    {
        var price = document.getElementById("price");

        var quantity = document.getElementById("quantity");

        var fn = document.getElementById("cross");
            fn.value=(price.value*quantity.value);
    });

    var counter = 2;         
    $("#addButton").click(function ()
    {

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<label>Product Name'+': </label>' +
          '<input type="textbox" name="pro" id="pro" class="red" placeholder ="Product">'+

          '<label> Product Price'+ ': </label>' +
          '<input type="textbox" name="price" id="price" class="red" placeholder ="Price" >'+

          '<label> Product Quantity'+ ': </label>' +
          '<input type="textbox" name="quantity" id="quantity" class="red" placeholder ="Quantity" >'+' '+

          '<input type ="textbox" id ="cross" size="10" class="red">'+' '+

          '<input type="button" class = "blue" id ="cross" value="Cross" onclick="product()"/>');

        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;
    });

    $("#removeButton").click(function ()
    {
        if(counter==1)
        {
            alert("No more textbox to remove");
            return false;
        }   

        counter--;

            $("#TextBoxDiv" + counter).remove();

     });


    /*$("#getButtonValue").click(function ()
    {

        var msg = 'Test';
        for(i=1; i<counter; i++)
        {
            msg += "\n Test" + i + " : " + $('#textbox' + i).val();
        }
            alert(msg);
            document.write('Test');
     });*/
});

我的＆＃34; Test.html＆＃34;：

<!DOCTYPE html>
<html>
<head>
    <title>AddMore section</title> 
    <link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

<body>
    <h1>Addmore section</h1>

    <form id="frm1">

        <label>Mobile Number:<input type="text" id="tx1" name="tx1" class="red" placeholder ="0123456789" />&nbsp;
        <input type="button" class ="blue" id ="add" value="Add" />&nbsp; Mobile Number is :
        <textarea id="ta1" style="height: 16px; width: 300px;"></textarea><br><br>

        <div id='TextBoxesGroup'>

            <div id="TextBoxDiv1">          

                <label>Product Name: </label><input type='textbox' class="red" id='pro' placeholder ='Product' name ='pro', required>

                <label>Product Price: </label><input type='textbox' id='price' class="red" placeholder ='Price' name ='price', required>

                <label>Product Quantity: </label><input type="textbox" id ="quantity" class="red" placeholder ='Quantity' name ='quantity', required>

                <input type="textbox" size="10" id="cross" class="red" />
                <input type="button" class = "blue" id ="cross" value="Cross" />

            </div>
        </div>

    </form><br>

    <input type='button' class="blue" value='Add Product' id='addButton'>
    <input type='button' class="blue" value='Remove Product' id ='removeButton'>
    <input type='button' class="blue" value='Total Amount' id ='getButtonValue'>

    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> 
    <script type="text/javascript" src ="js/custom.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>

</body>
</html>

虽然我在custom.js中定义了它，但我无法执行乘法。

此外，custom.css在这里以防万一：

div
{
    padding:2px;
}
.red
{
    background: pink;
}

.blue
{
    background: #F7F3BC;
}

label.error 
{
    color: brown;
    background: url("../images/cross.png") no-repeat left center;
    padding-left: 20px;
}

Answer 1

这种情况正在发生，因为您为两个元素（例如cross）提供了相同的ID（textbox and button）。
因此$('#cross').bind('click',function(){...})之类的事件永远不会被调用。

希望这可能对您有所帮助。

尝试使用jQuery乘以值

1 个答案: