Jquery Click event with javascript callback is gertting executed more than one time

Question

    function MyConfirm(message, callback) {
            console.log("In My Confirm");
            var ids = document.getElementById("mymodal");
            $('#MyText').html(message);
           
            ids.style.display = "block"
           
            $('input[id^=cfrm_]').click(function (e) {
                e.preventDefault();
                console.log("In Click Event");
                if (typeof callback === 'function') {
                    callback($(this).attr('value'));
                }
                ids.style.display = "none"
            });            
        }

        var as="My Test Message";

        function mytest(){
            var na = MyConfirm(as, function (result) {
                console.log("Result: "+result)
            });

        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    
        <input id="Button1" type="button" onclick="mytest()" value="button" /></div>
       <div id="mymodal" style="display:none">
            <div id="MyText"></div>
            <input id="cfrm_btnYes" type="button" value="Yes" />
            <input id="cfrm_btnNo" type="button" value="No" />
        
           </div>
    </form>
</body>
</html>

I am using the above code to mimic the default confirm dialog window action. The function is working fine. But upon clicking the the button mytest() is called and it makes the div #mymodal visible with two buttons as expected. But when you click the Yes or No button it makes the div hidden but it loops through the MyConfirm function multiple times. It can be seen in console. Can any one please explain me why I am getting this weird response. My aim is to create an alternate for confirm() fn. with a return value.

er-han · Accepted Answer · 2017-07-29 15:39:50Z

The problem is that you bind a new click event to confirm buttons each time MyConfirm() function executes. click event binding doesn't override old bindings but adds a new function to that event.

You can add $('input[id^=cfrm_]').off('click'); to delete old bindings before binding new one.

function MyConfirm(message, callback) {
            console.log("In My Confirm");
            var ids = document.getElementById("mymodal");
            $('#MyText').html(message);
           
            ids.style.display = "block"
           
            $('input[id^=cfrm_]').off('click');
           
            $('input[id^=cfrm_]').click(function (e) {
                e.preventDefault();
                console.log("In Click Event");
                if (typeof callback === 'function') {
                    callback($(this).attr('value'));
                }
                ids.style.display = "none"
            });            
        }

        var as="My Test Message";

        function mytest(){
            var na = MyConfirm(as, function (result) {
                console.log("Result: "+result)
            });

        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    
        <input id="Button1" type="button" onclick="mytest()" value="button" /></div>
       <div id="mymodal" style="display:none">
            <div id="MyText"></div>
            <input id="cfrm_btnYes" type="button" value="Yes" />
            <input id="cfrm_btnNo" type="button" value="No" />
        
           </div>
    </form>
</body>
</html>

saifudeen ni · Accepted Answer · 2017-07-29 11:37:52Z

0

Please try with return. Maybe it will be ready.

answered Jul 29, 2017 at 11:37

saifudeen ni

14510 bronze badges

Collectives™ on Stack Overflow

Jquery Click event with javascript callback is gertting executed more than one time

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related