Question

在下图中显示了该场景，我需要在动态按钮点击时计算价格。（批发价格*数量= Toal商品价格）

Firebug中的错误显示是：

未定义txtId

click

我尝试使用javascript进行此操作。

 $('#pick').click(function () {
        this.disabled = true;
        var $option = $('#select-product option');
        var table = $('<table border="0" class="table table-bordered"><th>ItemName</th><th>Retail Price</th><th>Wholesale Price</th><th>Quantity</th><th>Calculate</th><th>Total Item Price</th></table>').addClass('product-table');
        var i=0;
        $option.each(function () {
            debugger;
            if ($(this).prop('selected')) {
                var txtId = 'txtQty' + i;
                var lblId = 'lblQty' + i;
                var row = $('<tr><td>' + $(this).text() + '</td><td>' + $(this).attr('RetailPrice') + '</td><td>' + $(this).attr('WholesalePrice') + '</td><td>' + '<input type="text" id="' + txtId + '">' + '</td><td> <button type="button" class="btn btn-warning btn-xs" onClick="CalcPrice(txtId,$(this).attr(\'WholesalePrice\'),lblId)">Calculate</button></td><td><label for="tempprice" id="lblQty' + i + '></label></td></tr>');
                table.append(row);
                i++;
            } 
        });

        $('#product-load-tbl').append(table);
    });

    function CalcPrice(txtId,prc,lblId) {
        debugger;

    }

Answer 1

既然你提到了

我需要在动态按钮点击时计算价格

您必须使用事件处理程序，如

$(document).on('click', '#pick', function () {
   //Your code
}

因为动态生成的按钮没有加载到DOM中，所以你需要使用委托。

要查看差异检查fiddle1和fiddle2

<强> HTML：静态

<强> Fiddle1：

$('button').click(function () {
    alert("I'm clicked");
});
$('body').append('<button>Dynamic</button>'); //button will be append
                                              //click event won't work

<强> Fiddle2：

$(document).on('click','button', function () {
    alert("I'm clicked");
});
$('body').append('<button>Dynamic</button>'); //Will for buttons created dynamcially

Answer 2

至于错误消息

txtId is not defined

关注，

在HTML模板中，您有

var row = '..... onClick="CalcPrice(txtId,$(this).attr(\'WholesalePrice\'),lblId)"> ....'

您将变量“txtId”硬编码到HTML中。

需要

onClick="CalcPrice(' + txtID + ',' + $(this).attr(\'WholesalePrice\') + ',' + lblId + '"> ...

Answer 3

如果您的按钮最初未在DOM中加载，之后您已动态添加这些按钮，请尝试使用.live（）。您可以通过以下方式执行此操作：https://api.jquery.com/live/。查看给出的示例。

事件中的动态按钮单击手柄

3 个答案: