Jquery，如何将注意力集中在包装器div中的子元素上？

Question

我有一个div包装器和3个输入元素（文本输入和+ - 数量按钮）。 HTML结构如下所示：

<div id="total_text" style="display:none;" class="total_price_txt">Total price:
<div id="total_price" class="total_price">$0.00</div>
</div>

<div id="wrapper">
    <input id="plus"></input>
    <input id="text"></input>
    <input id="minus"></input>
</div>

还有一个jquery代码，用于在输入焦点上滑动总量：

$('#wrapper').on('focusin',function(e){
$("#product_wrapper").addClass("jquery_product");
$('#total_text').slideDown(400);

});

$('#wrapper').on('focusout',function(e){
$("#product_wrapper").removeClass("jquery_product");
$('#total_text').slideUp(400);
});

$('#amount_input').on('change paste keyup',function(e){
var filterPrice=$('#product_price').text().replace(/[^0-9.]+/gi, '');  
var price=parseFloat(filterPrice, 10);
var inputAmount = $('#amount_input').val();
var total = (inputAmount*price).toFixed(2);
$('#total_price').html("<div class='total_price'>$" +total+ "</div>");  
});

它有点起作用，但问题是当我在文本框内输入一个输入并希望用任何+ - 框改变它时，它会再次上下滑动。每次我在任何输入之间切换时都会发生这种情况。我希望它能够专注于整个div包装器，无论哪个输入都在焦点上，直到包装器本身失焦。