CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Nitish Jain
Nitish Jain

Reputation: 734

I am unable to understand the execution of the code

my code:

<head>
     <!-- All the required scripts and CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.1.14.min.js"></script>
</head>

<body>
    <!-- Bootstrap nav-tabs -->
    <ul class="nav nav-tabs" id="mainTabs">
        <li class="active" ><a href="#home" data-toggle="tab"><span class="glyphicon glyphicon-home"></span> Home</a></li>
        <li><a href="#group" data-toggle="tab" >Groups</a></li>
    </ul>

    <!-- Content of nav-tabs -->    
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade active in" id="home">
            home
        </div>

        <div class=" fade tab-pane" id="group" >
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-md-12">
                        <h4>Groups</h4>
                        <button onclick="f5()"> Add Group</button>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Model -->
    <div class="modal fade" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" >Add New Group</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary btn-md" id="add" >Add</button> 
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script type="text/javascript">         

    function f5() { 
        $('#myModal2').modal('show');
        $('#myModal2').on('click','#add', function (e) {
            console.log("new clicked");
            $('#myModal2').modal('hide');
        });
    }

    </script>

</body>

Now the problem is:
when I click on model button with id "add" first time then:

Output: new clicked (printed one time)

when I click on model button with id "add" again:

Now, Output: new clicked (printed two times)

when I click on model button with id "add" again:

Now, Output: new clicked (printed three times)

when I click on model button with id "add" again:

Now, Output: new clicked (printed four times)

Why it is happening?? I have searched on stack overflow and google but can't find anything useful to me. I am new to bootstrap, what I want is that each time that button with id "add" is clicked "new clicked" should be printed one time only.

Upvotes: 0

Views: 122

Answers (1)

Guillermo
Guillermo

Reputation: 1533

You would want to check the .off method form jQuery. It seems that you´re adding multiple listeners for the same thing, and you may want to remove all of them, before reassigning to avoid multiple prints of the same message.

For instance, in your f5 function (please, from now on use clear function for code clarity purposes) you´re creating a new listener for the same element, each time you execute it. .off() will help you because before attaching a new event listeners, it will remove the previously added ones.

BUT, in order to do things in the right way, you should group you event listeners attach code in a single method like "addEventListeners()", and run that function once. (If you´re adding elements to a page after loading it, then use event delegation).

function f5() { 
    $('#myModal2').modal('show');
    $('#myModal2').off('click'); // will remove any previous listeners attached with on
    $('#myModal2').on('click','#add', function (e) {
        console.log("new clicked");
        $('#myModal2').modal('hide');
    });
}

Regards

Upvotes: 1

Related Questions