1

我正在使用 jQuery 模板来创建一个信息表。每行包含一个减号按钮、加号按钮和它们之间的文本框。还有一些文字。当您单击减号或加号按钮时，文本框中的数字会上升或下降。所有这些都是通过模板动态呈现的，那么我的按钮将如何工作？我已经尝试了以下测试，它最终只是在我的所有减号按钮元素上调用了 click 函数：

jQuery('#template').tmpl(data).appendTo("#holdingCell");

    jQuery('#holdingCell #minusbutton').click(
        function(){
            alert(this.id);
        });

这是我的代码的相关部分。有人对我如何使这项工作有建议吗？

<script id="template" type="text/x-jquery-tmpl">
    <div style="display:block;margin-bottom:20px;" id="${getNextId()}">
      <div class="adjuster"><button id='minusbutton'>-</button><input id='quantityText' class="enterQuantity" type=text style="width:40px; margin-left:5px;margin-right:5px" /><button id=">+</button></div> 
      <div class="productName" style="width:200px"><div>${productname}</div></div>
      <div class="quantity"><span style="font-weight:bold;">${quantity}</span><span> Remaining</span></div>
    </div>


function getNextId(){
return id++;
}

function buildDialog(json){
//Stuff I didn't paste here turns the parameter 'json' into a variable 'data'

 jQuery('#template').tmpl(data).appendTo("#holdingCell");

    jQuery('#holdingCell #minusbutton').click(
        function(){
            alert(this.id);
        });
4

2 回答 2

3

您可以更改模板以将 onclick 添加到每个按钮。然后传入需要发送给函数的参数：

<div class="adjuster"><button id='minusbutton' onClick='minusClick(${id});'>-</button>


function minusClick(id) {
    alert(id);
 }
于 2012-04-17T15:16:35.073 回答
1 
$(function(){ //that means on page load
    $("#minusbutton").click(function(){
        var $item = $(this).parent().$("#quantityText");
        var current_value = $item.val();
        current_value = parseInt(current_value);
        if (current_value - 1 >= 0)
        {
             $item.val(current_value - 1);
        }
    })
});

这就是减号按钮的逻辑。您使用相同的逻辑对加号进行等效操作。

于 2012-04-17T15:11:33.247 回答