Click event not getting triggered after Ajax request

Question

I have a Ajax call that gets triggered after the document is loaded, Just below the ajax call I have submit event for the submit button...

The click event does not get triggered if the stmt alert("New Start") is removed. I'm sure there is bug in the ajax call but not sure what is it?

$.ajax({
                type:"GET",
                dataType:"json",
               url:"/getresponse/",
                data:{},
               context:this,
               success:function(response){
                   //event.preventDefault()

                    console.log("Value of response =" + response['table_appl']['IPTEXT'])


                    var vms = ['appl','enfr','det01','det02','det03','det04','det05','datais']

                    vms.forEach(function(i){
                        var header;
                        switch ( i ) 
                        {
                            case 'appl':
                                header = "APPL"
                                break;
                            case 'enfr':
                                header = "EN"
                                break;
                            case 'det01':
                                header = "D01"
                                break;
                            case 'det02':
                                header = "D02"
                                break;
                            case 'det03':
                                header = "D03"
                                break;
                            case 'det04':
                                header = "D04"
                                break;
                            case 'det05':
                                header = "D05"
                                break;
                            case 'datais':
                                header = "DT"
                                break;
                        }
                        //console.log("Value of response =" + response['table_appl']['IPTEXT'])
                        //value = ' + response['table_' + i + ']['IPTEXT']
                        //console.log("  Main loop IP      =" + response['table_'+ i ]['IPTEXT'] ) 
                        iptext = response['table_'+ i ]['IPTEXT']
                        dns1text = response['table_'+ i ]['DNS1TEXT']
                        dns2text = response['table_'+ i ]['DNS2TEXT']
                        gwtext = response['table_'+ i ]['GWTEXT']
                        nmtext = response['table_'+ i ]['NMTEXT']
                        ntp1text = response['table_'+ i ]['NTP1TEXT']
                        ntp2text = response['table_'+ i ]['NTP2TEXT']
                        id1text = response['table_'+ i ]['ID1TEXT']
                        hosttext = response['table_'+ i ]['HOSTTEXT']

                        if (!iptext){
                            //console.log("Its null")
                            iptext = ''
                        }

                        if (!dns1text){
                            //console.log("Its null")
                            dns1text = ''
                        }

                        if (!dns2text){
                            //console.log("Its null")
                            dns2text = ''
                        }
                        if (!gwtext){
                            //console.log("Its null")
                            gwtext = ''
                        }
                        if (!nmtext){
                            //console.log("Its null")
                            nmtext = ''
                        }
                        if (!ntp1text){
                            //console.log("Its null")
                            ntp1text = ''
                        }
                        if (!ntp2text){
                            //console.log("Its null")
                            ntp2text = ''
                        }
                        if (!hosttext){
                            //console.log("Its null")
                            hosttext = ''
                        }
                        if (!id1text){
                            //console.log("Its null")
                            id1text = ''
                        }

                        console.log('iptext = ' +iptext)

                        $('#div2').append('<div id=\'div2' + i + '\'>');
                        $('#div2' + i + '').addClass('box');

                        $('#div2' + i + '').append('<h2>' + header + '</h2>');

                        $('#div2' + i + '').append('<table id=\'table_' + i + '\' cellspacing=\'20\'></table>');
                        $('#table_' + i + '').append('<tr><td> <label for=\'ipaddresslabel\'>IPADDRESS</label> </td>' +
                        '<td> <input type=\'text\' name=\'IP\'  value =\'' + iptext + '\' >  </td> <td> <label id=\'DISPLAYIP\' for=\'success\' style="DISPLAY:none">Validated</label> </td></tr>');

                        $('#table_' + i + '').append('<tr><td> <label for=\'dns1label\'>DNS1</label> </td>' +
                        '<td> <input type=\'text\' name=\'DNS1\' value =\'' + dns1text + '\' > </td> <td> <label id=\'DISPLAYDNS1\' for=\'success\' style="DISPLAY:none">Validated</label> </td></tr>');

                        $('#table_' + i + '').append('<tr><td> <label for=\'dns2label\'>DNS2</label> </td>' +
                        '<td> <input type=\'text\' name=\'DNS2\' value =\'' + dns2text + '\' > </td> <td> <label id=\'DISPLAYDNS2\' for=\'success\' style="DISPLAY:none">Validated</label> </td></tr>');

                        $('#table_' + i + '').append('<tr><td> <label for=\'gwlabel\'>GATEWAY</label> </td>' +
                        '<td> <input type=\'text\' name=\'GW\' value =\'' + gwtext + '\'> </td> <td> <label id=\'DISPLAYGW\' for=\'success\' style="DISPLAY:none">Validated</label> </td></tr>');

                        $('#table_' + i + '').append('<tr><td> <label for=\'nmlabel\'>NETMASK</label> </td>' +
                        '<td> <input type=\'text\' name=\'NM\' value =\'' + nmtext + '\'> </td> <td> <label id=\'DISPLAYNM\' for=\'success\' style="DISPLAY:none">Validated</label> </td></tr>');

                        $('#table_' + i + '').append('<tr><td> <label for=\'ntp1label\'>NTPSERVER1</label> </td>' +
                        '<td> <input type=\'text\' name=\'NTP1\' value =\'' + ntp1text + '\'> </td> <td> <label id=\'DISPLAYNTP1\' for=\'success\' style="DISPLAY:none">Validated</label> </td></tr>');

                        $('#table_' + i + '').append('<tr><td> <label for=\'ntp2label\'>NTPSERVER2</label> </td>' +
                        '<td> <input type=\'text\' name=\'NTP2\' value =\'' + ntp2text + '\'><td> <label id=\'DISPLAYNTP2\' for=\'success\' style="DISPLAY:none">Validated</label> </td></tr>');

                        $('#table_' + i + '').append('<tr><td> <label for=\'hostlabel\'>HOSTNAME</label> </td>' +
                        '<td> <input type=\'text\' name=\'HOST\' value =\'' + hosttext + '\'> </td> <td> <label id=\'DISPLAYHOST\' for=\'success\' style="DISPLAY:none">Validated</label> </td></tr>');

                        $('#table_' + i + '').append('<tr><td> <label for=\'idlabel\'>INTERNAL DOMAIN</label> </td>' +
                        '<td> <input type=\'text\' name=\'ID1\' value =\'' + id1text + '\'> </td> <td> <label id=\'DISPLAYID1\' for=\'success\' style="DISPLAY:none">Validated</label> </td></tr>');

                        $('#table_' + i + '').append('<tr><td>  </td>' +
                        '<td> <input type="submit" value=\'save\' id=\'sub' + i + '\' /></td> <td>  </td></tr>');

                        //$('#div2' + i + '').append('<div id=\'div2' + i + 'footer\'>');

                        //$('#div2' + i + 'footer').append('<input type="submit" value=\'save\' id=\'sub' + i + '\' />')
                    }
                    );

                    $('#div2enfr').hide();
                    $('#div2det01').hide();
                    $('#div2det02').hide();
                    $('#div2det03').hide();
                    $('#div2det04').hide();
                    $('#div2det05').hide();
                    $('#div2datais').hide();

                    alert('End')


                }

        })

//alert("New Start")

$("#table_appl,#table_enfr,#table_det01,#table_det02,#table_det03,#table_det04,#table_det05,#table_datais").on( "click", "input:submit", 
                function( event ) {

Answer 1

There isn't a bug with the AJAX call, there's just a misconception about the order the code executes in. I assume the AJAX calls response is used to create the elements that the event handler is then bound to.

With the alert statement in there, the execution likely looks like this:

1. Send AJAX request
2. Alert (blocks the rest of that code until closed)
3. Receive response to AJAX request
4. Create elements
5. Bind event handler when alert box is closed

Without the alert statement, the execution looks like this:

1. Send AJAX request
2. Bind event handler
3. Receive response to AJAX request
4. Create elements

You obviously want 2 to happen after 4, so move it to the end of the success callback for your AJAX call. Alternatively modify your delegated event handler code so that it looks for an element that does definitely exist before the AJAX request completes, which would also require you to modify the selector passed as the second argument to .on().

Answer 2

Keep in mind that Ajax call is asynchronous so if you use any information from ajax response in event handle, it is high possibility that such information is not available yet. Alert is just to "consume" the time for the ajax call gets completed.

You can try to use sync mode in ajax call to see whether it works.