jPages不会识别使用jQuery动态添加的图像

时间:2016-09-07 08:53:28

标签: javascript php jquery html ajax

我有一个html,JS脚本从PHP / AJAX加载图像并将它们放入div中,之后JS将对其进行分页。 当我尝试手动硬编码我的图像时,一切都很好,当我用jquery加载图像时,脚本不会对它们进行分页,即使我尝试$(document).ready

(你可以在这里找到ipages.js:http://luis-almeida.github.io/jPages/js/jPages.js) HTML:

<script src="js/jPages.js"></script>
...
<ul id="itemContainer">
<li><img src="images/test/img (1).jpg" alt="image"></li>
<li><img src="images/test/img (2).jpg" alt="image"></li>
<li><img src="images/test/img (3).jpg" alt="image"></li>
<li><img src="images/test/img (4).jpg" alt="image"></li>
<li><img src="images/test/img (5).jpg" alt="image"></li>
<li><img src="images/test/img (6).jpg" alt="image"></li>
<li><img src="images/test/img (7).jpg" alt="image"></li>
</ul>

JS:

$(document).ready(function() {
    /* initiate plugin */
    $("div.holder").jPages({
        containerID: "itemContainer"
    });
});

以上内容有效。现在,如果我尝试使用jQuery附加itemContainer,它就不起作用了。我看到图像但没有分页: AJAX:

 $(function ()
    {
        $.ajax({
            url: 'models/fetchUsers.php',    //the script to call to get data
            dataType: 'json',                //data format
            success: function(data)          //on recieve of reply
            {
                $.each($(data), function(key, value) {
                    $('#itemContainer').append('<li><img src="images/profiles/'+value.user_id+'/'+value.profile_pic+'" alt="image"></li>');
                });
            }
        });
    });

1 个答案:

答案 0 :(得分:0)

试试这段代码。您正在准备好文档插件。所以当dom准备就绪时,所有当前的html分页完美。但是在执行ajax请求之后,您正在添加新的html元素,这些元素是死元素,并且仍然未初始化,因此html需要再次初始化。因此,在ajax成功请求中,我重新初始化了jPages插件并且它正常工作

hudson.util.HudsonFailedToLoad: org.jvnet.hudson.reactor.ReactorException: java.util.ConcurrentModificationException
    at hudson.WebAppMain$3.run(WebAppMain.java:244)
Caused by: org.jvnet.hudson.reactor.ReactorException: java.util.ConcurrentModificationException
    at org.jvnet.hudson.reactor.Reactor.execute(Reactor.java:269)
    at jenkins.InitReactorRunner.run(InitReactorRunner.java:45)
    at jenkins.model.Jenkins.executeReactor(Jenkins.java:1010)
    at jenkins.model.Jenkins.<init>(Jenkins.java:878)
    at hudson.model.Hudson.<init>(Hudson.java:85)
    at hudson.model.Hudson.<init>(Hudson.java:81)
    at hudson.WebAppMain$3.run(WebAppMain.java:227)
Caused by: java.util.ConcurrentModificationException
    at java.util.ArrayList$Itr.checkForComodification(ArrayList.java:901)
    at java.util.ArrayList$Itr.next(ArrayList.java:851)
    at hudson.PluginManager.resolveDependantPlugins(PluginManager.java:882)
    at hudson.PluginManager$2$2.run(PluginManager.java:563)
    at org.jvnet.hudson.reactor.TaskGraphBuilder$TaskImpl.run(TaskGraphBuilder.java:169)
    at org.jvnet.hudson.reactor.Reactor.runTask(Reactor.java:282)
    at jenkins.model.Jenkins$7.runTask(Jenkins.java:999)
    at org.jvnet.hudson.reactor.Reactor$2.run(Reactor.java:210)
    at org.jvnet.hudson.reactor.Reactor$Node.run(Reactor.java:117)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)