将 jquery ui spinner 应用于动态添加的元素

Question

我想将 jquery-ui 微调器应用于动态添加的元素。

--html代码--

<table>
  <tr>
    <td>
      <div id="eachBox1"></div>
    </td>
    <td>
      <div id="eachBox2"></div>
...
</table>

-- jQuery 代码--

    $.ajax({
             ...
             success: function (items) {
                 $.each(items.d, function (idx, item) {
                      $('#eachBox'+idx).html
                       (   ...
                          '<input type="text" id="qty'+idx+'" value="1"/>'
                           ...
                       )
                  }
              }
     }) 

我想将 jquery-ui 微调器应用于名称以 qty 开头的每个元素。 所以我尝试了

$(document).on("load","[id^=qty]" function () {
    $(this).spinner();
});

但它不起作用。如果我将load 事件更改为click，它会起作用。 但这不是我想要的。 你有什么解决办法吗？

Answer 1

试试这个：

$.ajax({
         ...
         success: function (items) {
             $.each(items.d, function (idx, item) {
                  $('#eachBox'+idx).html
                   (   ...
                      '<input type="text" id="qty'+idx+'" value="1"/>'
                       ...
                   )
              }
              $("[id^=qty]").spinner();
          }
 })

---

刚刚将.spinner() 添加到success: function(){} 中，以便仅在创建元素后应用spinner()。

Answer 2

我认为，您的代码中缺少一个逗号。

 $(document).on("load","[id^=qty]", function () {
                $(this).spinner();
            });

这段代码怎么样

$(document).ready(function(){
      $("[id^=qty]").spinner();
});

Answer 3

试试这个

$.ajax({
             ...
             success: function (items) {
                 $.each(items.d, function (idx, item) {
                      $('#eachBox'+idx).html
                       (   ...
                          '<input type="text" id="qty'+idx+'" value="1"/>'
                           ...
                       )
                      $('#qty'+idx).spinner();
                  }
              }
     }) 

我希望这会奏效