Le bouton jQuery ne fonctionne pas avec le clic, mais fonctionne lorsqu'il est ajouté à la zone d'alerte

Question

J'ai ajouté un bouton sur une page html pour effectuer un traçage. Le bouton pour tracer la figure correctement, mais lorsque j'ajoute une boîte d'alerte au code, le clic fonctionne comme prévu. Y a-t-il des erreurs visibles dans mon code posté?

Comment puis-je implémenter ceci pour fonctionner correctement?

Voici une partie du code:

// append to p container 
pcontainer = $('<p></p>').append(button).appendTo('#plot'); 

//$('<input type="button" value="Plot Data" />').click(getData).appendTo('#plot'); 
// add all the variables} 

/* 
* Download data for all the requested variables. 
*/ 
function getData() { 
    var baseUrl = document.getElementById('url').value; // get the url address 
    var x1,x2; 
    var url = baseUrl + '.dods?'; 
    for (var i=0; i < document.variablesX.vx.length; i++) { 
     var selectedX = $('#variablesX :radio').filter(':checked'); 

     //define the variables X that have been selected 
     if (selectedX.length ==0) { 
      alert("please choose ONE variable foraxisX"); 
      return; 
     } 

     var selectedY = $('#variablesY :radio').filter(':checked'); // define the variables Y that have been selected 
     if (selectedY.length ==0) { 
      alert("please choose ONE variable for axis Y"); return; 
     } 

     var selectedType = $('#myplot :radio').filter(':checked'); // define the plot type that have been selected 
     if (selectedType.length ==0) { 
      alert("please choose ONE plot type"); return; 
     } 

     if (document.variablesX.vx[i].checked) { 
      // for each selected variable, get the data and pass to textarea. 
      var url1 = url + document.variablesX.vx[i].id; 
      loadData(url1, function(data) { 
       x1 = toJsonString(data); //alert(x1); 
      }, '/proxy/'); // load data from url1 
     }; 

     if (document.variablesY.vy[i].checked) { 
      // for each selected variable, get the data and pass to textarea. 
      var url2 = url + document.variablesY.vy[i].id; 
      loadData(url2, function(data) { 
       x2 = toJsonString(data);}, '/proxy/'); // load data from url2 
     }; 
    }; 

    //alert ("You have chosen to plot."); 
    plotData(x1,x2); 
} 

function plotData(x1,x2) { 
    var arr1, arr2; // define 1 dimentional array to get splited strings 
    var d1 = []; // define array to put the two variables together 
    arr1 = x1.split (","); 
    arr2 = x2.split (","); // convert string into array 

    for (var i = 0; i < arr1.length; i += 1) 
     d1.push([arr1[i], arr2[i]]); // combine two variables into one array 

    // plot in flot 
    $(function() { 
     $.plot($("#placeholder"),[d1]); 
    }); 
} 

Y at-il des erreurs visibles dans mon code? Pouvez-vous m'aider à mettre en œuvre ce que j'ai décrit?

Answer 1

S'il vous plaît afficher le code fro votre routine getData() qui reçoit les données du serveur. En supposant que vous utilisez un Ajax $ .get (ou similaire), il s'agit d'un appel asynchrone et les instructions qui le suivent seront exécutées avant l'appel pour que les données soient réellement terminées. Vous pouvez soit renvoyer les instructions suivantes dans la fonction de réussite de l'appel ajax, soit obtenir les données avec async défini sur false.

Votre alerte ralentit le processus vers le bas afin que les données get a terminé avant de passer à l'étape suivante.