Javascript 引导表单在模式确认后提交

目前，我有一个动态生成的产品列表（基于我的数据库）。我有一个动态创建的按钮，一个功能按钮

因此，feature按钮的想法是允许用户对他/她单击的特定产品进行功能化

因此，单击feature按钮后，将打开一个模式，允许用户选择他们希望在哪里展示产品。这可以在下面的屏幕截图中看到

整个想法是，一旦用户选择一个选项（每月特价、新货、畅销书、幻灯片），单击绿色功能按钮，这将把productID、userID和featuredLocation作为表单值提交到我的后端

我能够以某种方式提醒出我想要的值，但我意识到，在第一次点击“FeatureThisProduct”按钮时，行为就是我想要的。但是，如果我再次单击另一个产品下的“Feature this Product”（功能此产品）按钮，警报将同时运行第一个实例和第二个实例，并且这将继续。以下附件说明了我的意思

功能第一产品：

功能第二产品：

因此，这种行为只是不断堆积。目前，我的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>

“.$shortenedProductTitle”
。$shortenedProductAuthor.

特色产品

模态

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

&时代；
特色产品
您希望在哪个区域展示此产品？
月刊特刊
畅销书
新品上市
幻灯片
取消
特征

---

如果你们中有人能在这方面帮助我，我将不胜感激。提前谢谢你，祝你度过愉快的一天

您正在为每个功能单击中的

$（“#submitFeature”）

添加事件侦听器。避免这种情况的一种方法是将其添加到

$（'.featUrisProduct'）

侦听器之外。所以它将是这样的：

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

---

谢谢你，你的回答真的很有效！既然你已经指出了这一点，我就更清楚它是如何工作的了。非常感谢你！倪浩冷在