将jQuery UI微调器应用于动态添加的元素

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 event更改为click ，那么它将起作用。 但这不是我想要的。 你有什么解决办法吗？

Answer 1

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

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

这段代码呢

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

Answer 2

尝试这个 ：

$.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 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();
                  }
              }
     }) 

我希望这会工作