2014-04-28 37 views
0

我有一个简单的表格,从我的数据库动态加载一些项目jQuery的访问新加载的DOM元素

<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元素,当我inse在每个项目的文本字段中输入一个数量,然后当我按提交按钮动态加载新的股票价值并将其显示在数量列表项中时。

我做到了用传统的方式,加载它们

$.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 
          ) 
         ) 


        } 
}) 

一切正常,但当我加载我想显示当前的股票,然后将网页应用我所描述的所有后访问DOM元素上面,看起来不对,看起来我重复了很多代码,它的代码太不整齐了。

我做了一些研究,它看起来像我必须使用的。对()事件处理程序,但我ca't使用它的初始页面加载。我需要一些帮助来指导我的方式,一些文章引导我一些很好的材料。

从我读有存储我的一些查询功能变量的方式,并结合那些。对()

回答

1

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

为了线了你的事件处理的元素,你可能要等到DOM是准备好了,你可以做到这一点通过增加在domready中回调jQuery代码,例如

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

编辑:正如在下面的评论所指出的另一个用户,显然jQuery的内置.on()还钩入动态地添加的元素,类似于的liveQuery如上所述。

+2

同样是真实的['。对()'](https://api.jquery.com/on/)无需插件... – War10ck

+0

不过,我想代码.... :) – user348078

+1

我没有意识到@ War10ck,感谢您的信息。 –