Bootstrap表格，经模式确认后提交

Question

currently I have a dynamically generated list of products (based off my database). What I have is a button that's also dynamically created, a feature button.

So the idea of the feature button is to allow the user to feature a particular product he/she has clicked on.

So upon clicking the feature button, a modal will open up to allow the users to choose where they would like to feature the product. This can be seen in the following screenshot.

The entire idea is once the user select a choice (Monthly Special, New Arrivals, Best Sellers, Slideshow), click the green feature button, this will submit the productID, userID and featuredLocation as form values to my backend.

I was able to somehow alert out the values I want, but I realised that on the first click of the "Feature this Product" button, the behaviour is what I want. However, if I were to click a second time on the "Feature this Product" button under another product, the alert will run both the first instance and the second, and this just continues on. The following attachment is an illustration of what I meant.

Feature first product:

Feature second product:

So this behaviour just keeps stacking on and on. Currently, what I have in my javascript is:

$('.featureThisProduct').click(function () {
    $('#featureModal').modal("show");
    var productID = $(this).attr("productID");
    var adminID = $(this).attr("logAdminID");
    var featureProductAs = $('#featuredAs').val();
    $('#submitFeature').on("click",function(){
        alert (adminID);
        alert (productID);
        alert (featureProductAs);
    });
});

and in my html is:

Display List of Products with Feature Button

<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2 productGridListContainer">
    <div class="thumbnail productGridImageWrapper">
        <a class="view_product_info" productInfoID='.$productID.' productInfoTitle="'.$productTitle.'" logAdminID='.$adminID.'>
            <img src="'.$imgUrl.'" style="max-height:200px; max-width:150px;" class="productGridImage">
       </a>
    </div>
    <div class="productGridTitleWrapper">
        <h4 class="productGridTitle">'.$shortenedProductTitle.'</h4>
    </div>
    <div class="productGridAuthorWrapper">
        <p class="productGridAuthor">'.$shortenedProductAuthor.'<br /></p>
    </div>
    <div class="productGridButtonWrapper">
        <button class="btn btn-info btn-sm btn-block featureThisProduct" productID="'.$productID.'" logAdminID="'.$adminID.'">
            Feature this product
        </button>
    </div>
</div>

Modal

<div id="featureModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">
                    Feature This Product
                </h4>
            </div>
            <div class="modal-body">
                <form id="featureForm" method="post">
                    <div class="form-group row">
                        <div class="col-xs-12 col-sm-12 col-m-12 col-lg-12">
                            <label for="featuredAs">Which area would you like to feature this product at?</label>
                            <select class="form-control" id="featuredAs">
                                <option value="special">Monthly Special</option>
                                <option value="best">Best Selling</option>
                                <option value="new">New Arrival</option>
                                <option value="slideshow">Slideshow</option>
                            </select>
                        </div>
                    </div>
                </form>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-success" id="submitFeature">Feature</button>
            </div>
        </div>
    </div>
</div>

Would really appreciate if any one of you could help me out in this area. Thank you in advance, and have a nice day!

Answer 1

You are adding an event listener to $('#submitFeature') in each feature click. One way to avoid this is adding it outside of the $('.featureThisProduct') listener. So it will be like this:

var productID, adminID, featureProductAs;

$('.featureThisProduct').click(function () {
    $('#featureModal').modal("show");
    productID = $(this).attr("productID");
    adminID = $(this).attr("logAdminID");
    featureProductAs = $('#featuredAs').val();
}

$('#submitFeature').on("click",function(){
     alert (adminID);
     alert (productID);
     alert (featureProductAs);
});