麻烦制作一个独特的按钮

Question

I have a situation in which I use this java script for a single button and it works like this:

<script type="text/javascript">
$(document).ready(function(){

    $(document).on('click','a.btn-success',function(e){
        e.preventDefault();
        var myProductID=$(this).data('productid');
        var myUserid=$(this).data('iam');
        var postData={productID:myProductID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success').remove();
                $('a.btn-success').remove();
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Added</button></p>');
            }
        });
    });
});
</script> 

And my link:

                    <!-- Add to cart button -->
                    <p><a class="btn btn-success btn-xs btn-block" data-productid="<?php echo $current_product->product_id; ?>" data-userid="<?php echo $userID; ?>" href="../incl/ajax-add-to-cart.php">Add</a></p>
                    <p id="ajax-response"></p>

And this works!!

What I now want is to use it with a list of products in which each product has besides its picture a button "add" which is represented by:

 a.btn-success

What I am doing is something like this:

              <!-- Add to cart button -->
                    <?php echo "<p><a class='btn btn-success'$button_id' btn-xs btn-block' data-productid=' $current_product->product_id;' data-userid='$userID' href='../incl/ajax-add-to-cart.php'>Add</a></p>"?>
                    <p id="ajax-response"></p>

Notice that I am trying to append a variable "$button_id" to the name of the button (it is really an an a tag with the style of a bootstrap button).

Then in the JavaScript I do as follows:

<script type="text/javascript">
$(document).ready(function(){

    $(document).on('click','a.btn-success'.$button_id,function(e){ //added button id
        e.preventDefault();
        var myBookID=$(this).data('bookid');
        var myUserid=$(this).data('iam');
        var postData={bookID:myBookID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success'.$button_id).remove();//added button id
                $('a.btn-success'.$button_id).remove();//added button id
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Tillägt</button></p>');
            }
        });
    });
});
</script>

But it does not work. Can anybody help?

Thank you

Answer 1

You should probably change your function into:

<script type="text/javascript">
$(document).ready(function(){
    var button_id = '<?php echo $button_id; ?>';
    $(document).on('click','a.btn-success'+button_id,function(e){ //added button id
        e.preventDefault();
        var myBookID=$(this).data('bookid');
        var myUserid=$(this).data('iam');
        var postData={bookID:myBookID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success'+button_id).remove();//added button id
                $('a.btn-success'+button_id).remove();//added button id
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Tillägt</button></p>');
            }
        });
    });
});
</script>

I assume this JavaScript file is inside PHP file where you can put $button_id value into JavaScript variable using simple <?php echo $button_id; ?>