Jquery event not called after update

Question

I have a pretty simple JSF form on my hand like so:

<h:inputText id="number" value="#{bean.value}"
styleClass="integer" onkeyup="update()" />

I have a jQuery selector as well like this:

jQuery(document)
        .ready(
                    jQuery(".integer")
                            .keydown(
                                    function(event) {
                                        //do your stuf


        });

Now, this function is getting triggered pretty well, until I update the container around this input. It is a ui:repeat by the way. The update() method only refreshes a label. After the update the function is never triggered until I reload the page. This jquery included from a file in the head part, but is is still there after the update, function is not triggered however? How can I make it work again after update?

may i suggest you yo add your function as a callback inside your update function? — happy, May 26 '13 at 19:27
I'm sorry, I'm quite slow tonight have been working all day, what do you mean? — Peter Jaloveczki, May 26 '13 at 19:35
the update() method refreshing the label should have a callback inside it in a way to initialize your other method. — happy, May 26 '13 at 19:38
possible duplicate of [Primefaces's partial update breaks JQuery event binding?](http://stackoverflow.com/questions/14400624/primefacess-partial-update-breaks-jquery-event-binding) — BalusC, May 27 '13 at 13:45

score 1 · Answer 1 · edited May 27 '13 at 15:24

1

As others have already answered: When you update the container the event handler is not attached anymore and your need to reattach it.

However, another option to this is using jquery`s on() method.

So use something like this (untested though):

jQuery(document)
    .ready(
        $(document).on("keydown", '.integer', function (event) {
            //do your stuf
    }));

edited May 27 '13 at 15:24

BalusC

1,082,665
372
3,610
3,555

answered May 27 '13 at 10:12

Jens

6,243
1
49
79

@BalusC How am I going to test OPs code (that I don't have)? I am using the `on()` function in my application and it works very well. I am just trying to give an idea of the code and writing "untested" should imply that it might not work to just copy and paste it. Are you saying I should leave the code out? Or the answer altogether and just write a comment that jquerys `on()` mechanism would be an alternative? – Jens May 27 '13 at 14:09
Sorry, I was apparently having a bad morning and mixing posts. Yours looks fine. – BalusC May 27 '13 at 15:25

score 0 · Answer 2 · answered May 27 '13 at 01:38

This isn't work after you update because the element isn't bound event anymore, so you should create a Javascript's function to solve this issue:

<script type="text/javascript">
function test(){
jQuery(".integer")
                            .keydown(
                                    function(event) {
                                        //do your stuf


        });
};
jQuery(document)
        .ready(test();
              );      
</script>

Component update your target component should call this test() function, like:

<p:commandButton oncomplete="test();" update=":COMPONENT_ID_HERE" ..../>

Jquery event not called after update

2 Answers2