为什么page load加载正常，却被卡在Event上？

Question

我面临着一个非常奇怪的情况。我有一个JavaScript文件：

/// <reference path="jquery-1.8.2.min.js" />
var compte = 0;
var poste = [];
var posteselectionner = [3];
$(function () {

   jQuery.getJSON("ServiceContactTest.svc/DoWork", null, function () { **//HERE ****

            alert("ds");

   });

   var msg = 1;

   $("#Uploadb").click(function () {

      alert('f');

   });

   $(".test1").click(function () {

      msg = msg + 1;

      $("#li1").html("<a href='#'><img src='images/partners/jquery.png' alt=''></a>");

   });

   $("#info").mouseover(function () {

      $("#info").popover("show");

   });

   $("#info").mouseleave(function () {

      $("#info").popover("hide");

   });

   $("#envoyer").click(function () {

      var erreur = true;

      if (document.getElementById("myFile").value == "") {

         jQuery("#alert2").attr("style", "display:block");
         erreur = false;

      } else {

         jQuery("#alert2").attr("style", "display:none");

      }

      if (compte == 0) {

         jQuery("#alert3").attr("style", "display:block");
         erreur = false;

      } else {

        jQuery("#alert3").attr("style", "display:none");
      }

      if (erreur == true) {

        jQuery.getJSON("ServiceContactTest.svc/DoWork", null, function () {  **//HERE ****

            alert("ds");

        });

        alert('doo3');
      }

    return erreur;

});

});

如你所见，我在页面加载中绑定了一些事件，但是我想特别指出web方法的FIRST调用和SECOND调用：

1-第一个调用正在页面加载中运行：

jQuery.getJSON("ServiceContactTest.svc/DoWork", null, function () { **//HERE ****

    alert("ds");

});

2-第二个是"envoyer"中的Event Click：

$("#envoyer").click(function () {

      var erreur = true;

      if (document.getElementById("myFile").value == "") {

         jQuery("#alert2").attr("style", "display:block");
         erreur = false;

      } else {

         jQuery("#alert2").attr("style", "display:none");

      }

      if (compte == 0) {

         jQuery("#alert3").attr("style", "display:block");
         erreur = false;

      } else {

        jQuery("#alert3").attr("style", "display:none");
      }

      if (erreur == true) {

        jQuery.getJSON("ServiceContactTest.svc/DoWork", null, function () {  **//HERE ****

            alert("ds");

        });

        alert('doo3');
      }

    return erreur;

  });

我遇到的问题是，第一个通话效果很好，但第二个则根本不起作用。

我知道第二个调用的代码不会引发错误，因为调用了alert('doo3');。

这是我的网络方法服务：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;

namespace CvContact
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class ServiceContactTest
    {
       [OperationContract]
       [WebGet(ResponseFormat = WebMessageFormat.Json)]
       public void DoWork()
       {
            return;
       }
    }
 }

这是我的html代码 :

<input id="envoyer" type="submit" class="btn btn-danger" runat=server value="Postuler !" ClientIdmode="static" />

我真的不知道哪里错了，你知道原因吗？ page load加载正常，却被卡在Event上。

Answer 1

You need to prevent default behaviour on submit button otherwise your page is reload if "erreur" = true:

$("#envoyer").click(function (e) {
    e.preventDefault();
    //code here

  if(!erreur)
     $('#myform').trigger('submit');//#myform   because you didn't post your html code
});