Bootstrap 弹出框更改数量答案

【问题标题】：Bootstrap Popover Change QuantityBootstrap 弹出框更改数量
【发布时间】：2014-01-09 06:52:59
【问题描述】：

我有购物车物品的列表视图。我想允许用户在悬停或单击弹出框内的每个项目时增加/减少数量。我已经编写了以下代码，但是当我尝试单击弹出框内的 + 或 - 号时，弹出框会隐藏。在这方面的任何帮助以及自定义 CSS 的指针，使其在没有硬编码的情况下成为通用的，将不胜感激并很有帮助。使用 bootstrap-3.0.3 和 jquery-1.9.1

$(document).on( 'click', '.cart-side-view-item-list', function(e) {
    var item_id=$(this).attr('id');
    items_data = window.items_data;
    items_list = items_data.items_list;
    var div_content;
    for(var itm_id in items_list)
    {
        temp_id = "cart-side-view-item-" + itm_id 
        if (temp_id === item_id)
        {
            div_content = '<div class="sp-quantity"> \
                          ' + items_list[itm_id].item  + ' \
                            <div class="sp-plus fff"> \
                            <a class="ddd" href="#" data-multi="1"> \
                            <i class="glyphicon glyphicon-plus-sign"></i></a></div> \
                            <div class="sp-input"> \
                                <input type="text" class="item-quantity" value="'+ items_list[itm_id].quantity  +'" /> \
                            </div> \
                            <div class="sp-minus fff"> \
                            <a class="ddd" href="#" data-multi="-1"> \
                            <i class="glyphicon glyphicon-minus-sign"></i></a></div> \
                           </div>';
        }

    }

    editQuantity = function() {
        var $button = $(this);
    var $input = $button.closest('.sp-quantity').find("input.item-quantity");
    $input.val(function(i, value) {
        return +value + (1 * +$button.data('multi'));
    });

    };

    var $btn2 = $('#'+item_id);

    $btn2.popover({trigger: 'mannual', 'placement':'left', content: div_content, html:true})
        .on( 'click', (function (e)  {
            var pop_data = $(this).data('popover').tip();
            $(pop_data).find('.sp-quantity').on('click', editQuantity);
        }))
        .popover('show');
});

【问题讨论】：

“manual”的拼写错误在我的代码库中造成了 4 小时的严重破坏 :( .

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您可以通过停止其点击事件传播来防止弹出框关闭

 $btn2.popover({
     trigger: 'mannual',
     'placement': 'left',
     content: div_content,
     html: true
 })
     .on('click', (function (e) {
         var pop_data = $(this).data('popover').tip();
         $(pop_data).find('.sp-quantity').on('click', editQuantity);

         e.preventDefault();
         e.stopPropagation();
         return false;

     }))
     .popover('show');

【讨论】：

这不起作用。我试过做 e.preventDefault() 和 e.stopPropogation();也是。

【解决方案2】：

代码中存在一个 seplling 错误，导致工作流的功能与预期不同。对不起。

【讨论】：