javascript - 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') 添加一个事件监听器。避免这种情况的一种方法是将其添加到 $('.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);
});