Javascript Rails 3.2-如何在对话框小部件中添加jquery微调器小部件

我的jquery微调器小部件似乎在jquery对话框ui对话框buttonpane类中不起作用。我的目标是通过对话框中的表单输入选择项目数量，并添加到购物车中

我研究了dialog和spinner的jQueryAPI，但没有什么突出的地方。什么打破了我的纺纱机？注：为简洁起见，此处不包括类“条目”及其内容

我的HTML：

<div id="storeItemZoom">
    <% @products.each do |product| %>
        <div id="itemBoxZoom" data-id="<%= product.id %>" data-brand="<%= product.brand %>">
            <table>
                <tr>
                    <td><%= image_tag(product.image_url )%></td>
                    <td><span><%= sanitize(product.description) %></span></td>
                </tr>
            </table>
            <div class="price_line">
                <span class="price"><%= number_to_currency(product.price)%></span>
                (<%= product.portion_size%> <%= product.unit_of_measure%>)           
            </div>
            <div class="itemMagnify" data-id="<%= product.id %>">
            </div>
            <div class="btnQty" data-id="<%= product.id %>">
                <label for="spinner">Quantity:</label>
                <input id="spinner" name="value" size="1" value="1" min="1" max="100" data-id="<%= product.id %>"/>
            </div>
        </div>
    <%  end %>
</div>

我得到的只是表单输入元素——没有微调器按钮。我在这里俯瞰什么？

---

非常感谢。

您是否使用Chrome进行测试？我注意到一个类似的问题，在页面重新加载后偶尔会自行解决，但并不总是这样。我是，版本29.0.1547.57。但我在IE 10中也有同样的行为。我在Windows7上。

$(document).ready(function(){

$('#storeItemZoom').hide();
$('#itemBoxZoom').hide();
$('.btnQty').hide();
$("#spinner[data-id='" + prodvarid + "']").hide();

//Rollover Magnify
$('.entry').mouseover(function(){
    prodvarid = $(this).data('id');
    prodvarbrand = $(this).data('brand');
    //$("#spinner[data-id='" + prodvarid + "']").spinner();

    $("#itemBoxZoom[data-id='" + prodvarid + "']").dialog({
        autoOpen: false,
        show: 400,
        modal: true,
        title:  prodvarbrand,
        minWidth: 800,
        close: function(event, ui){
            $(this).dialog("destroy");
            $('#storeItemZoom').css("display","none");
        },
        buttons: [{
            text: "Add to Cart",
            click: function() {
                $.ajax({
                    type: "POST",
                    url: '/line_items',
                    beforeSend: function(xhr){
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
                    data: {product_id: prodvarid, remote: true},
                    dataType: "script"
                });
                $(this).dialog("destroy");
                $('#storeItemZoom').css("display","none");
            }
        }]
    });
});

$('.itemMagnify').click(function(){
    $("#itemBoxZoom[data-id='" + prodvarid + "']").dialog('open');
    var qty1 = $(".btnQty[data-id='" + prodvarid + "'] input").spinner();
    $(qty1).prependTo($('.ui-dialog-buttonset'));
    $(".btnQty[data-id='" + prodvarid + "'] label").prependTo($('.ui-dialog-buttonset'));
});
/*End Rollover Magnify*/
});