Duplicate Jquery event in ajax call

Asked

Viewed 107 times

2

Good afternoon guys, I’m in the following situation:
I have my page called Stock.html, it contains the Jqueries events belonging to it, for now everything normal, but on this page there is a button called Filter that opens a modal and fills it (with ajax call) with page content called Estoque_filter.html, however in it there is a Jquery event that calls another ajax and makes internal changes to the session.

Well my problem is, every time I click on the Filter button I normally run the tasks, close the modal and click again on the button, the Jquery event that is on the Stock page_filter.htlm is duplicated, tripled, etc depending on how often I click to load the modal, so making several times the call of the second ajax mentioned above.

Following example:

Stock.html

<html>
    <head>
    </head>

    <body>
        <button id="filtro">Filtro</button>
        <div id="modal" style="display:none;">

        </div>
        <script type="text/javascript">
            $("#filtro").click(function(){
                OpenModal('Estoque_filter.html');
            }); 
            function OpenModal(url){
                $.ajax({
                    method:"GET",
                    url: url,
                    async: true
                }).done(function (data){
                    $("#modal").html(data);
                    $("#modal").css("display","block");
                });
            }   
        </script>

    </body> 
</html>

Estoque_filter.html

<html>
    <head>
    </head>

    <body>
        <button id="altera">Altera Sessão</button>
        <script type="text/javascript">
            $("#altera").click(function(){
                $.ajax({
                    method:"GET",
                    url: 'altera_sess.php',
                    async: true
                }).done(function (data){
                    $("#modal").css("display","none");
                });
            }); 
        </script>
    </body> 
</html>
javascript jquery ajax javascript-events

  • After clicking not only disable the button immediately when you click it and enable it in the ajax answer?

  • No, because this button can be clicked several times, the problem is at the time I call again the modal and it fills the Jquery event again. Then he calls the event that already existed and the one just placed with Jquery

2 answers

2


First, the ajax call of the already asynchronous jquery. You don’t need async: true in that code. Second, put the events in Jquery’s DOM Ready. with the code below:

$(function() {
    $("#altera").click(function(){
        $.ajax({
            method:"GET",
            url: 'altera_sess.php'
        }).done(function (data){
            $("#modal").css("display","none");
        });
    });
});

The above code should not duplicate the event call but you probably did not put all the code you use on your page. If you keep calling the . jquery click it will add the call to the Systener and will stack a lot of calls. There are several ways to clean and one way is to use $("#altera").unbind();. Another case may be that the click event is associated with another tag and the javascript Event Bubbling is firing it. Try this I posted there and comment if it worked or not.

  • 1

    I tried to know about this unbind(), and there it says that it was replaced by off(), I used and worked, but my fear is after give memory Leak at some point where javascript saves events, because from what I read it does not remove from the stack of events it just disassociates the element of the page. Know if it is possible to cause some kind of Leak memory by doing this?

2

Use the method .one() in the jQuery of the aquivo Estoque_filter.html. It fires the event only once and then removes it. So it will not stack events:

$("#altera").one("click", function(){
    $.ajax({
        method:"GET",
        url: 'altera_sess.php',
        async: true
    }).done(function (data){
        $("#modal").css("display","none");
    });
});

Bonus

Instead of using $("#modal").css("display","none");, jQuery has its own method for hiding elements. Use $("#modal").hide();.

Instead of using two lines for the same selector:

$("#modal").html(data);
$("#modal").css("display","block");

Use:

$("#modal").html(data).show();

The method .hide() hides and the .show() showcase.

  • Vlw, I will test this method . one(), as soon as I test rank if it worked.

  • It worked as you told me too, but with one I have no control over when to disassociate the event, and with off() I disassociate only when I’m sure I won’t use it anymore. Anyway, thanks for your help.

  • You can use off() with one() as well. By the way, this jQuery from this loaded page should be on the main page. So you wouldn’t have all this trouble.

  • 1

    Very good your contribution @Sam. I didn’t even know there was this . one().

  • It is that the page I upload will be loaded in other places and the behavior of the events will be the same.

Browser other questions tagged javascript jquery ajax javascript-events

You are not signed in. Login or sign up in order to post.