button.click仅在前面有警告的情况下执行

button.click only executed with alert in front

本文关键字:情况下 执行 警告 click 在前面 button      更新时间:2023-09-26

首先:
此页面适用于在线药房
我们使用一个小脚本从保险公司检索一些数据,以确保用户实际上拥有保险。

在我们的一个页面上,我们有两个文本字段和一个按钮。文本字段向按钮发送一个.click()以检索一些信息,但前提是它们都填充了正确类型的数据
这是有效的。

为了提高我们网站的可用性,我们正在创建一个不同页面的流量。前面描述的页面就是其中之一。我确信所需的信息总是在2个文本字段中,所以我使用JavaScript向按钮发送.click()。但不知何故,$('ZK').click();不起作用,但alert(); $('ZK').click();起作用。

有谁能向我解释为什么第一个不起作用,第二个起作用?也许还有我该如何解决这个小问题?

.click()是不是有什么没有活动之类的?

此页面内的代码:(非间接加载)

文本字段和按钮:

<INPUT onkeypress="return noenter()"  
       onkeydown="return isNumericKey(event)"  
 TYPE="TEXT"  
 class="ajaxsearch"  
 name="DOB" id="DOB"  
 value="<%=DOB%>"  
 MAXLENGTH="8"  
 style="width:60px;height:18px"  
 onkeyup="javascript:if ($(DOB).get('value').length==8 &&  
                         $(DOB).get('value')!='ddmmjjjj')
 {  
   var myFx=new Fx.Tween($(DOB));  
   myFx.set('color','#000066');  
   $('ZK').click();  
 } else {  
   var myFx=new Fx.Tween($(DOB));  
   myFx.set('color', '#cc0000');  
 };">  `
<INPUT url="?NC=<%=Rnd(Now)%>"  
 TYPE="BUTTON"  
 NAME="ZK" ID="ZK"  
 VALUE="Zoek mij"  
 class="button"  
 style="width:70px;height:22px">

调用脚本:

  if ($('DOB').get('value').length==8 
      && $('DOB').get('value')!='ddmmjjjj') 
  {
    var myFx=new Fx.Tween($('DOB'));
    myFx.set('color', '#000066');
    //alert();
    $('ZK').click();
   } else {
     var myFx=new Fx.Tween($('DOB'));
     myFx.set('color', '#cc0000');
   }

Ajax脚本&调用:

 <script language="javascript"> 
    window.addEvent('domready', function() { 
      $('ZK').addEvent('click', function(event) { 
        event.stop(); 
        var req = new Request.HTML({ 
          method: 'post', 
          url: '../ajax/a_bsn.asp',
          data: {
            'BSN':$('BSN').get('value'), 
            'DOB':$('DOB').get('value'),
            'RequestType':'WWW',
            'RXID':'<%=GUID%>'
          }, 
          update: $('RES'),
          onRequest: function() {
            $('RES').innerHTML = '<img width="16px" height="16px" src="../images/spinner.gif"/>';
    }}).send(); 
  });
////////
<%  If (Len(BSN)=8 or Len(BSN)=9) and IsNumeric(BSN) and Len(DOB)=8 and IsNumeric(DOB) Then %>
if ($('BSN').get('value').length>7){
  var myFx=new Fx.Tween($('BSN'));
  myFx.set('color', '#000066');
} else {
  var myFx=new Fx.Tween($('BSN'));
  myFx.set('color', '#cc0000');
}
if ($('DOB').get('value').length==8 && $('DOB').get('value')!='ddmmjjjj'){
  var myFx=new Fx.Tween($('DOB'));
  myFx.set('color', '#000066');
  // var $zk = $('ZK'); console.log($zk); $zk.click();
  // alert('Uw gegevens worden ingevuld.');
  setTimeout("$('ZK').click();",1);
  //$('ZK').click();
} else {
  var myFx=new Fx.Tween($('DOB'));
  myFx.set('color', '#cc0000');
}
<%  End If %>
////////
});
</script>

受Ajax 影响的Div

<DIV id="RES">      
<INPUT TYPE="TEXT" ID="PNAAM" onkeypress="return noenter()"  NAME="PNAAM" VALUE="<%=PNAAM%>" class="text_inv" style="width:375px">
</div>

最有可能的是,在其他错误中,您有一个以前的语句没有以分号结尾。尝试移除alert(),并让;进行测试。此外,如果您还没有,请检查您的控制台,因为您应该看到至少1个错误。

编辑后,我的初始答案不再有意义。

编辑:

您的点击处理程序和ajax调用被封装在domready事件处理程序函数中。您的"调用脚本"也应该在domready中。根据您的最新编辑,domready处理程序在ASP标记<% 之前关闭

这是你发布的:

        }).send();  // --this is the end of ajax
    }); // -- this is the end of the click handler
}); // -- this is the end of domready
<%  If (Len(BSN)=8

所以你的通话脚本:

if ($('DOB').get('value').length==8 && $('DOB').get('value')!='ddmmjjjj') {
    var myFx=new Fx.Tween($('DOB')); myFx.set('color', '#000066');
    //alert();
    $('ZK').click();
} else { var myFx=new Fx.Tween($('DOB')); myFx.set('color', '#cc0000'); }

在连接了点击处理程序后,需要进入domready

window.addEvent("domready", function(){
    // Let's attach the click handler:
    $('ZK').addEvent('click', function(event) {...do the ajax here etc...});
   // the "call script" needs to be here
});

您需要等待文档结构加载。

顺便说一句,如果你停止在问题中移动代码,那会有所帮助——只需发布你目前正在使用的代码即可。

重用函数、选择器和变量。。。

window.addEvent('domready', function() {
    var ZK = $('ZK');
    ZK.addEvent('click', function(event) { 
        // make event safe and reusable via software call
        event.stop && event.stop(); // don't call stop if not a real event.
        // logic here

    });
    $('DOB').addEvent('keyup', function() {
        // this == DOB
        var value = this.get('value'); // get it once.
        if (value.length && value.length === 8 && value !== 'ddmmjjjj') {
            // do not call click! we can now fireEvent
            ZK.fireEvent('click'); 
        }
    });
});

不要使用内联js。不要依赖$,对mootools 1.2.4+使用document.id

概括一下,不要去dom做合成.click()-它不是最可靠的,你也不需要。

我们的首席程序员(他最初在大约8年前的某个地方创建了这个页面)认为将所有逻辑转移到函数中可能会更好。这样,如果必要的话,它们可以在代码的其他部分更容易地被触发。我们还删除了所有(旧的)内联脚本。

在这个解决方案中,使用了其他答案的某些部分。我要感谢所有其他的回答者和评论者的帮助。

代码的顶部现在看起来是这样的(经过测试并在浏览器中稳定工作):

    function updateName(){
        if (document.id('BSN').get('value').length>7 && document.id('DOB').get('value').length==8 && document.id('DOB').get('value')!='ddmmjjjj'){
            var req = new Request.HTML({
                method: 'post',
                url: '../ajax/a_bsn.asp',
                data:{'BSN':document.id('BSN').get('value'),'DOB':document.id('DOB').get('value'),'RequestType':'WWW','RXID':'<%=GUID%>'},
                update: document.id('RES'),
                onRequest: function() {
                    document.id('RES').innerHTML = '<img width="16px" height="16px" src="../images/spinner.gif"/>';
                }
            }).send();
        }
    }
    function checkBSN(){
        if (document.id('BSN').get('value').length>7){
            var myFx=new Fx.Tween(document.id('BSN'));
            myFx.set('color', '#000066');
            updateName();
        } else {
            var myFx=new Fx.Tween(document.id('BSN'));
            myFx.set('color', '#cc0000');
        }
    }
    function checkDOB(){
        if (document.id('DOB').get('value').length==8 && document.id('DOB').get('value')!='ddmmjjjj'){
            var myFx=new Fx.Tween(document.id('DOB'));
            myFx.set('color', '#000066');
            updateName();
        } else {
            var myFx=new Fx.Tween(document.id('DOB'));
            myFx.set('color', '#cc0000');
        }
    }
    window.addEvent('domready', function() {
        document.id('ZK').addEvent('click', function(event) {
            event.stop && event.stop();
            updateName();
        });
        document.id('BSN').addEvent('keyup', function(event) {
            event.stop && event.stop();
            updateName();
        });
        document.id('DOB').addEvent('keyup', function(event) {
            event.stop && event.stop();
            updateName();
        });
    <%  If (Len(BSN)=8 or Len(BSN)=9) and IsNumeric(BSN) and Len(DOB)=8 and IsNumeric(DOB) Then %>
        updateName();
    <%  End If %>
    });