Question

我有购物车商品的列表视图。我希望允许用户在悬停时增加/减少数量，或者单击弹出框中的每个项目。我编写了下面的代码，但是当我尝试在弹出窗口内的+或 - 符号内单击时，popover会隐藏。在这方面的任何帮助，以及指向自定义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');

Answer 2

代码中出现了一个错误的错误，导致工作流程的功能与预期不同。对不起。

Bootstrap Popover更改数量

2 个答案: