Ajax 请求后未触发单击事件答案

【问题标题】：Click event not getting triggered after Ajax requestAjax 请求后未触发单击事件
【发布时间】：2014-02-11 16:16:29
【问题描述】：

我有一个在加载文档后触发的 Ajax 调用，就在 ajax 调用下方我有提交按钮的提交事件...

如果删除了 stmt alert("New Start")，则不会触发 click 事件。我确定 ajax 调用中存在错误，但不确定是什么？

$.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 ) {

【问题讨论】：

在 fidlle 上为我们提供代码
您可能想退后一步，考虑改进算法的方法。所有这些 if 语句和开关肯定可以优化吗？
你也应该考虑使用结束分号：这是javascript
您在某处缺少}，无法在编辑器中验证。关于分号：blog.izs.me/post/2353458699/…
我无法提供小提琴，因为我得到了服务器的响应..

标签： javascript jquery ajax

【解决方案1】：

AJAX 调用没有错误，只是对代码执行顺序存在误解。我假设 AJAX 调用响应用于创建事件处理程序随后绑定到的元素。

使用alert 语句，执行过程可能如下所示：

发送 AJAX 请求
警报（阻止该代码的其余部分直到关闭）
接收对 AJAX 请求的响应
创建元素
关闭警报框时绑定事件处理程序

没有alert 语句，执行如下：

发送 AJAX 请求
绑定事件处理程序
接收对 AJAX 请求的响应
创建元素

您显然希望 2 发生在 4 之后，因此请将其移至 AJAX 调用的 success 回调的末尾。或者修改您的委托事件处理程序代码，使其查找在 AJAX 请求完成之前确实存在的元素，这还需要您修改作为第二个参数传递给 .on() 的选择器。

【讨论】：

Anthony：绑定事件不是成功的一部分。它与它是分开的
我的逻辑是1.发送Ajax请求...2.接收响应...3.创建元素...4.绑定事件...
@user1050619 是的，我知道。这就是我要说的问题，它是独立的，因此不会延迟到 AJAX 请求（听起来像是依赖）完成，除非您有警报阻止进一步执行。
@user1050619 不，这就是你认为你的逻辑，但这不是它的工作原理。如果你想保证 AJAX 请求在之后发生某些事情，它需要进入 success 处理程序。这就是 AJAX 的工作原理。
我有太多的事件要放入成功处理程序中。有没有办法等待 AJAX 响应请求然后绑定它？

【解决方案2】：

请记住，Ajax 调用是异步的，因此如果您在事件句柄中使用来自 ajax 响应的任何信息，则很有可能这些信息尚不可用。警报只是为了“消耗” ajax 调用完成的时间。

您可以尝试在ajax调用中使用同步模式，看看是否有效。

【讨论】：