Question

我正在使用jQuery Template来创建信息表。每行包含一个减号按钮，加上按钮，以及它们之间的文本框。还有一些文字。单击减号或加号按钮时，文本框中的数字会上升或下降。所有这些都是通过模板动态呈现的，那么我的按钮将如何工作？我已经尝试了以下测试，它最终调用了所有我的减号元素上的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);
        });

Answer 1

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

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


function minusClick(id) {
    alert(id);
 }

Answer 2

$(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);
        }
    })
});

这是减号按钮的逻辑。你使用相同的逻辑来做等效的加号。

需要帮助将事件绑定到jQuery模板按钮

2 个答案: