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

メソッドを使用.on()して、クリックハンドラーを新しいボタンに委任する必要があります（非推奨の.live()メソッドの代わりに）。

http://api.jquery.com/on

お気に入り：

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

    // code here

});
于 2012-06-21T11:14:49.097 に答える
0

保存リンクへのクリックイベントはすでにバインドされています。新しい製品を追加するときは、イベントを添付せずに新しい保存リンクを作成します。

同じIDを持つ複数の要素のリンクを持つことはできないため、保存リンクにクラスを割り当てます。リンクを作成するのは、メインのhtmlコードとjavascriptコードに含まれている必要があります。

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

'future'イベントのイベントもバインドするには、jqueryオブジェクトのliveメソッドを使用します。http://api.jquery.com/live/

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

使用する必要があるjqueryのバージョンによって異なります：http：//api.jquery.com/on

于 2012-06-21T11:25:21.907 に答える