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