javascript - Bootstrap Popover 改变数量

Question

我有一个购物车元素的 ListView 。我想允许用户在悬停时增加/减少数量或单击弹出窗口中的每个元素。我已经编写了以下代码，但是当我尝试在弹出窗口内单击 + 或 - 符号时，弹出窗口会隐藏。在这方面的任何帮助以及自定义 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');
});

Answer 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');