Question

我有一个简单的表单来动态加载我的数据库中的一些项目

<input type="text" name="search" />
<input type="submit" name="submit" />

当我点击提交按钮时，我的DOM会附加类似

的内容

<ul>
  <li class="name">item1</li>
  <li class="quantity">120</li>
  <li class="update"><input type="text" name="update_quantity" /></li>
  <li class="submit_quantity"><input type="submit" name="submit" value="update"></li>
</ul>
<ul>
  <li class="name">item2</li>
  <li class="quantity">14</li>
  <li class="update"><input type="text" name="update_quantity" /></li>
  <li class="submit_quantity"><input type="submit" name="submit" value="update"></li>
</ul>
<ul>
  <li class="name">item3</li>
  <li class="quantity">13</li>
  <li class="update"><input type="text" name="update_quantity" /></li>
  <li class="submit_quantity"><input type="submit" name="submit" value="update"></li>
</ul>

我有一个PHP，可以完成我需要的所有逻辑：显示项目，更新数量，显示数量

所以我想访问新加载的DOM元素，当我在每个项目的文本字段中插入数量，然后当我按下提交按钮动态加载新的股票价值并将其显示在数量列表项目中。

我是以传统方式完成的，在加载后访问DOM元素

$.ajax({
        url:php file url",
        type:'post',
        cache:false,
        data:'input='+field,
        success:function(data){

                       //access each element with $.each(

                           for each current item add an .click(

                                call an ajax function to update the quantity and display the new quantity
                            )
                       )


                    }
})

一切都很好，但是当我加载页面时，我想显示当前的库存，然后应用我上面描述的所有内容，看起来有些错误，看起来我重复了很多代码，代码离我太远了整洁。

我做了一些研究，看起来我必须使用.on（）事件处理程序，但我不能将它用于初始页面加载。我需要一些帮助来指导我的方式，一些文章一些很好的材料来指导我。

从我所读到的，有一种方法可以将我的一些查询函数存储在变量中并将它们与.on（）

组合在一起。

Answer 1

有一个jQuery插件，livequery可能对您有所帮助。 LiveQuery使您能够像通常使用jQuery一样连接到元素，但是如果添加了新元素，它将自动附加已定义的行为，而无需任何额外的管理。

为了连接元素的事件处理，您可能必须等到DOM准备就绪，您可以通过在domReady回调中添加jQuery代码来完成此操作，例如

$(document).domReady(function() {
   ...
});

编辑正如下面评论中的另一位用户所指出的那样，.on()内置的jQuery显然也会挂钩动态添加的元素，类似于上面提到的LiveQuery。 / p>

jquery访问新加载的dom元素

1 个答案: