0

在提交主要报价单之前，我有以下代码来插入多个产品和价格。

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

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

    newTextBoxDiv.after().html('<br>' + '<label>Product '+ counter + '  </label>' +
          '<input type="text" name="product" id="product" value="" >' + 
          '<label>Price '+ counter + '  </label>' +
          '<input type="text" name="price" id="price"  value="" >'+ '<a href="#" id="save" >Save!</a>');

    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 = '';
    for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
    });

    $("#save").click(function() {

        if(!$("#product").val() || !$("#price").val() ){
            apprise("You must define a product and price!");
            }else{
            var product = $("#product").val();
            var price = $("#price").val();
            var postdata = 'product='+product+'&price='+price;

            $.ajax({  
                type: "POST",  
                url: "inserter/add_quotation_product.php",  
                data: postdata, 
                success: function() {  
                    $('#TextBoxesGroup').html("<div id='message'></div>");  
                    $('#message').html(product+" Saved!");  
                }  
            });  
            return false;  

        }

主要的html代码：

<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
        <label>Product 1 </label> 
        <input type=text 
                id="product" 
                name="product" 
                placeholder="product to quote" 
                required/> 
        <label>Price 1</label> 
        <input id="price" 
                name="price" 
                type=text 
                placeholder="price of product" 
                required> 
            <a href="#" id="save" >Save!</a> 
    </div> 
</div>

问题是单击手动创建的保存按钮效果很好，但单击 jquery 创建的保存按钮似乎完全无效！

4

2 回答 2

0

保存链接的点击事件已经绑定。添加新产品时，您会创建一个不附加事件的新保存链接。

您不能拥有具有相同 ID 的多个元素链接，因此我会为保存链接分配一个类。它必须在主 html 代码和创建链接的 javascript 代码中。

<a href="#" class="save">Save!</a>

使用 jquery 对象的 live 方法也可以将事件绑定到“未来”事件。http://api.jquery.com/live/

$(".save").live("click", function() {
});

取决于您必须使用的 jquery 版本：http: //api.jquery.com/on

于 2012-06-21T11:25:21.907 回答
0

您应该使用.on()方法将点击处理程序委托给您的新按钮（而不是不推荐使用的.live()方法）。

http://api.jquery.com/on

喜欢：

$("#yourButtonParent").on('click', '#yourButton', function () {

    // code here

});
于 2012-06-21T11:14:49.097 回答