2017-06-20 1 views
-7

Ich habe eine On-Click-Funktion, um die ID eines zu bekommen, und ich möchte es warnen. Der folgende Code funktioniert nicht und zeigt null, warum?Wie bekomme ich Wert außerhalb jquery klicken Sie auf Funktion

dank
var projectId=null; 

$('body').on('click', '#list a', function(){ 
        projectId=this.id; //id should = 30 
        alert(projectId); //here display 30 
}); 

alert(projectId); //here display null 

, was ich wirklich tun möchte ist: a.js Ich habe etw wie, wenn ich auf „a“ es auf eine andere Seite, die durch meine projectId zu machen brauchen umleiten: href =‘/projectDetail‘diese Seite Aufruf b.js

$.ajax({ 
        type: "GET", 
        url: 'http://xxx', 
        dataType:'json', 
        contentType:"application/json", 
        success:function(data){ 
         console.log(data); 
         var projectList="<ul style='list-style:none;'>" 

         for (var i = 0; i < data.data.length; i++) { 

           projectList += "<li><div id='listall'><a 
          id='"+data.data[i].projectId+"' 
          href='/projectDetail'>"+ 
            "<img class='back' src='/img/Homepage_ProjectFrame.png'></li>" 
           } 
           var projectList="<ul>" 
          }); 

var projectId=null; 

$(document).on('click', '#listall a', function(){ 
      event.preventDefault(); 
      projectId=this.id; 
      alert(projectId); 
    }); 

alert(projectId); 

b.js ich habe:

$.ajax({ 
      type: "GET", 
      url: 'http://xxx?projectId='+projectId 
      dataType:'json', 
      contentType:"application/json", 
      success:function(data){ 
       console.log(data.data); 
       $(".photoprojectD").attr("src",data.data.projectPhotoUrl); 
       $(".dlocation p").html(data.data.countryName); 
       $(".dcategory p").html(data.data.categoryName); 
}); 

Also muss ich projectId von aj s um dynamische Informationen zu rendern Haben Sie gute Ideen? Vielen Dank für Ihre Jungs helfen

+1

Die letzte Zeile, sobald die Seite geladen läuft. An diesem Punkt ist 'projectId' immer noch 'null' –

+0

Es liegt daran, dass 'alert()' beim Laden des Dokuments ausgeführt wird. Das Element wurde an diesem Punkt nicht geklickt (und kann nicht), daher ist der Wert null. –

+1

Die wichtige Frage ist: * wie * und * wann * willst du diesen Wert tatsächlich verwenden? Der Code, den Sie gepostet haben, versucht tatsächlich nichts Nützliches zu tun. Wenn Sie den Wert in einem zweiten Klick-Handler alert(), sollte es einwandfrei funktionieren. –

Antwort

1

die zweite alert(projectId); außerhalb der "click" -Ereignishandler ausgeführt wird, sobald die Seite geladen wird. Zwangsläufig ist dies vor Ihr "Klick" -Handler kann möglicherweise ausgeführt werden, weil der Benutzer wahrscheinlich nicht Zeit hatte, darauf zu klicken, und selbst wenn sie Zeit hatten, gibt es keine Garantie, dass sie. Daher wird die Variable projectId nicht gefüllt, wenn dieser Code ausgeführt wird.

Sie können sicherlich projectId außerhalb Ihres "Klick" -Ereignisses verwenden, aber Sie müssen warten, bis mindestens ein "Klick" -Ereignis passiert ist, bevor Sie erwarten können, dass es einen Wert hat.

Es besteht auch die Gefahr, dass Ihre Hyperlinks das Zurücksetzen der Seite verursachen, bevor dies überhaupt geschieht. Da Sie jQuery verwenden können Sie diese ganz einfach verhindern:

$('body').on('click', '#list a', function(event) { 
    event.preventDefault(); //prevent default hyperlink redirect/reload behaviour 
    projectId=this.id; //id should = 30 
    alert(projectId); //here display 30 
}); 

Schließlich sicher, dass dieser andere Ort, den Sie den Wert verwenden möchten, ist nichts albern wie tun andere „projectId“ Variable mit engeren Rahmen zu erklären und dann versuchen, verwenden, dass. Zum Beispiel wird diese nicht Arbeit, wie Sie wollen:

var projectId = null; 

$('body').on('click', '#list a', function(event) { 
    event.preventDefault(); //prevent default hyperlink redirect/reload behaviour 
    projectId=this.id; //id should = 30 
    alert(projectId); //here display 30 
    exampleFunc(); //call the function below 
}); 

function exampleFunc() { 
    var projectId = null; //oops, another "projectId" with narrower scope (within this function) will take precedence here 
    alert(projectId); //will be null 
}); 

Während dieses wird:

var projectId = null; 

$('body').on('click', '#list a', function(event) { 
    event.preventDefault(); //prevent default hyperlink redirect/reload behaviour 
    projectId=this.id; //id should = 30 
    alert(projectId); //here display 30 
    exampleFunc(); //call the function below 
}); 

function exampleFunc() { 
    alert(projectId); //will be 30 
}); 
Verwandte Themen