Question

我正在尝试在动态创建的列表元素中创建一个jQuery UI滑块小部件。现在，列表工作，项目被创建并添加到列表中，滑块显示并响应用户输入，但它没有使用我传入的值初始化。我觉得我很接近，但是我错过了一些东西。我正在使用jQuery 1.6.1，jQuery 1.6.4，而且我对Javascript和jQuery相对较新。

除了形成页眉和页脚之外，这里是主页中内容的总和：

<div data-role="content">
  <ul data-role="listview" data-theme="g" id="items">
  </ul>      
</div>

没什么特别的。

现在，用户点击页脚中的几个按钮，一个数组更新，我添加一个列表项（剥离）：

    var item = arguments[0];

    // items_in_order is a 2d global array that's 
    // updated w/ the items the user adds
    var li = get_list_item( item, 
                            items_in_order[item][0], 
                            items_in_order[item][1], 
                            items_in_order[item][2] );

    // if the list item already exists, replace it, 
    // otherwise add it to the list as a new entry.        
    if ( $("#item_" + item).length ) {
      $("#item_" + item).replaceWith( li );
    }
    else {
      $("#items").append( li );
    }

    // this is where I'm creating the slider
    if ( items_in_order[item][2] ) {
      $("#item_" + item + "_price_slider").slider({ value: 1, 
                                                    min: 0, 
                                                    max: 2, 
                                                    step: 1 });

    }

    // if we updated an existing list item, recreate it,
    // otherwise recreate the whole list
    if ( $("#item_" + item).length ) {
      $("#item_" + item).trigger('create');
    }
    else {
      $("#items").trigger('create');
    }

    // and refresh the list view
    $('#items').listview('refresh');

正在使用此函数创建列表项的HTML：

function get_list_item ( name, qty, price, by_weight ) {

  var str = "";
  str += '<li id="item_' + name + '">';
  str += '<table style=" font-size: 20pt; %" ><tr>';
  str +=   '<td style="width: 50%;">' + name + "</td>";
  str +=   '<td style="width: 50%; ">';
  str +=     '<input style=" width: 40px; float: left " type="number" id="item_' + name + '_qty" value="' + qty + '"> x ' + price;
  str +=   '</td>';      
  str += "</tr></table>";
  if ( by_weight ) {
    str += '<div><div id="item_' + name + '_price_slider"></div></div>';

  }
  str += "</li>";

  return str;
}

再一次，没什么特别的。现在，这是在呈现页面时创建的HTML。（从萤火虫中复制出来。）

<li id="item_Potatoes" class="ui-li ui-li-static ui-body-g">
  <table style="font-size: 20pt; width: 100%;">
    <tbody>
      <tr>
        <td style="width: 50%;">Potatoes</td>
        <td style="width: 10%;">
          <input type="number" value="1" id="item_Potatoes_qty" style="width: 40px; float: left;" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"> x 2
        </td>
        <td style="width: 10%;">$2</td>
      </tr>
    </tbody>
  </table>
  <div>
    <div id="item_Potatoes_price_slider" class="ui-slider-switch"></div>
    <div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
      <a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="-1" aria-labelledby="item_Potatoes_price_slider-label" style="left: 0%;" aria-valuetext="" title="-1">
        <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
          <span class="ui-btn-text"></span>
        </span>
      </a>
    </div>
  </div>
</li>

所以，作为一个新手，我注意到两件事：

似乎没有正确设置min，max等设置。
我的印象是对.slider()的调用会将ui滑块插入到其id被调用的元素中，在本例中为#item_Potatoes_price_slider，但正如您所看到的那样，它正在创建一个新元素“接下来是“它被召唤的那个。这是相关的还是我误解了什么？
我一直在回复slider，以便在滑动时更新#item_Potatoes_qty框，但这也无效。我在调试的时候把它剪掉了，这似乎没有影响任何东西。

那么，为什么这不起作用的任何想法？（顺便说一句，我也很乐意提出改进建议并使其更清洁的建议。）谢谢！

无法在动态元素中创建jQuery Mobile UI滑块

0 个答案: