Bootstrap表格，經模式確認后提交

Question

目前，我有一個動態生成的產品列表（基於我的數據庫）。 我所擁有的是一個也是動態創建的按鈕，一個功能按鈕。

因此，功能按鈕的想法是允許用戶展示他/她單擊過的特定產品。

因此，在單擊功能按鈕時，將打開一個模式，允許用戶選擇他們希望在哪里展示產品。 在以下屏幕截圖中可以看到。

整個想法是，一旦用戶選擇一個選項（“每月特惠”，“新到貨”，“暢銷書”，“幻燈片”），單擊綠色功能按鈕，這會將productID，userID和featuredLocation作為表單值提交給我的后端。

我能夠以某種方式提醒我想要的值，但是我意識到，在“功能該產品”按鈕的第一次單擊上，行為就是我想要的。 但是，如果我第二次單擊另一個產品下的“功能此產品”按鈕，則警報將同時在第一個實例和第二個實例上運行，並且此過程將繼續。 以下附件說明了我的意思。

特色第一產品：

特色第二產品：

因此，這種行為只會不斷增加。 目前，我在JavaScript中擁有的是：

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

在我的html中是：

顯示帶有功能按鈕的產品列表

<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>

語氣

<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>

如果您能在這方面幫助我，我將不勝感激。 在此先感謝您，祝您愉快！

Answer 1

您將在每次功能單擊$('#submitFeature')事件偵聽器添加到$('#submitFeature')中。 避免這種情況的一種方法是將其添加到$('.featureThisProduct')偵聽器之外。 因此它將是這樣的：

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