Jquery recall function (inside updatepanel) is not smooth

Question

I have a jquery function to toggle "ReplyComment" div.

function addcommentdiv() {
    $('.in').click(function () {
        var $this = $(this),
            $reply = $this.next('.ReplyComment');
        var cevapladisplay = $reply.css('display');
        $reply.toggle();

    });
}
addcommentdiv();

$(document).ready(function () {
    addcommentdiv();
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
    addcommentdiv();
});

...

<ul class="chats">
 <li class="in" >
        blablabla
 </li>
 <div class="ReplyComment" id="ReplyComment">
     blablabla
 </div>
 </ul>

This function sometimes work sometimes doesn't.Shortly not working smoothly. I can't understand.(inside updatepanel and datalist)

@undefined How can I fix it :/ – serdar Sep 18 '13 at 19:05 — serdar, Sep 18 '13 at 19:05
@JasonP updatepanel>datalist>ul – serdar Sep 18 '13 at 19:07 — serdar, Sep 18 '13 at 19:07

score 2 · Accepted Answer · answered Sep 18 '13 at 19:10

It's possible that you are adding the click handlers multiple times. To avoid the issue completely, I would recommend using event delegation:

$(document).ready(function() {
    $(document).on('click', '.in', function () {
        var $this = $(this),
            $reply = $this.next('.ReplyComment');
        var cevapladisplay = $reply.css('display');
        $reply.toggle();

    });
});

This will prevent you from needing to rebind the events after every UpdatePanel refresh.

Jquery recall function (inside updatepanel) is not smooth

1 Answers1