Question

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

因此，功能按钮的想法是允许用户使用他/她点击的特定产品。

因此，点击功能按钮后，将打开一个模式，允许用户选择他们想要展示产品的位置。这可以在以下屏幕截图中看到。

整个想法是用户选择一个选项（每月特刊，新品上市，畅销图，幻灯片），点击绿色功能按钮，这会将productID，userID和featuredLocation作为表单值提交给我的后端。

我能够以某种方式提醒我想要的价值观，但我意识到在第一次点击＆＃34;特色此产品＆＃34;按钮，行为是我想要的。但是，如果我第二次点击＆＃34;特色此产品＆＃34;在另一个产品下的按钮，警报将同时运行第一个实例和第二个实例，这只是继续。以下附件是我的意思的说明。

功能第一产品：

功能第二产品：

所以这种行为只是不断堆叠。目前，我在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);
});

引导表格提交模式确认

1 个答案: