added data in p:dataScroller lost Javascript function

Question

I am using p:dataScroller with 10 chunk Size, but on my content of each item, I am adding one class, it have a click event function, when I load the page, my function event only works with the 10 first items, this is my code

<h:form> 
                    <p:dataScroller widgetVar="dScroller" value="#{documentalBean.listdocumental}" var="documental" chunkSize="10">
                            <div id="#{documental.ID_DOCUMENTAL}" class="resultados-filtro">
                                <div class="item-filtro">
                                    <div>
                                        <img src="someimage" alt="" />
                                        <div>
                                            <h3>Text</h3>
                                            <p><span>Text</span></p>
                                            <p>Text</p>
                                            <p><span>text</span> Text</p>
                                            <p><span>text</span> Text</p>
                                        </div>
                                    </div>
                                </div>
                                <div></div>
                            </div>
                    </p:dataScroller>
                </h:form>

My Javascript event:

$(".resultados-filtro").click(function () {
                alert("event");
            });

When I scroll down and the next 10 rows are loaded, they do not react on the click function

score 0 · Answer 1 · answered Jul 06 '16 at 14:27

I've experienced similar dataScroller + Javascript problems. A work around that we employed was to put your Javascript into a function, and call that with onclick attributes in the element.

<p:dataScroller widgetVar="dScroller" value="#{documentalBean.listdocumental}" var="documental" chunkSize="10">
    <div onclick="alertClick()" id="#{documental.ID_DOCUMENTAL}" class="resultados-filtro">
        ...
    </div>
</p:dataScroller>
<script type="text/javascript">
    function alertClick() {
        $(".resultados-filtro").click(function () {
            alert("event");
        });
    }
</script>

Better to learn how to have 'dynamic' events: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements, which is the duplicate of http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements — Kukeltje, Jul 06 '16 at 15:25

added data in p:dataScroller lost Javascript function

1 Answers1