追加パラメータ付きボタン（ajaxではない）

Question

検索結果を最も近い場所にフィルタリングするボタンがあります。

私のHTMLボタン

<a href="trending" onclick="addUrl(this); alert(this);" class="btn btn-warning" id="location">Nearest Location</a> 

私のjqueryの

function addUrl(element){ 
    if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
      var lat = position.coords.latitude; 
      var lng = position.coords.longitude; 
      console.log(lat); 
      console.log(lng); 

      $(element).attr('href',function(){ 
       return element.href + '?lat=' + lat + '&lng=' + lng; 
      }); 


     }); 
    } 

    else 
     alert("navigator.geolocation is not available"); 
} 

私はボタンをクリックすると、パラメータなしでURLに移動ようです。ここで何が間違っているのか分かりません。

Answer 1

問題はgeolocation.getCurrentPosition関数はそう実際にリダイレクトアクションが実行された後、あなたのコードはhref属性を変更し、非同期であるということです。既定のリンククリックアクション（クリックイベントハンドラ内でe.preventDefault()またはreturn falseを使用）を無効にし、geolocation.getCurrentPositionコールバック内でwindow.location.href = YOUR_URL_WITH_PARAMSを使用すると、リダイレクトが発生します。

document.getElementById('location').addEventListener("click", function(e){ 
    e.preventDefault(); 
    var href = e.target.href; 
    addUrl(href); 
}); 

function addUrl(href){ 
    if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
      var lat = position.coords.latitude; 
      var lng = position.coords.longitude; 
      console.log(lat); 
      console.log(lng); 
      window.location.href = href + '?lat=' + lat + '&lng=' + lng; 


     }); 
    } 

    else 
     alert("navigator.geolocation is not available"); 

} 

Answer 2

htmlドキュメント内の 'onclick'イベントの代わりに、イベントリスナーを使用して、ネイティブイベントを停止するためのpreventDefault（）関数を呼び出すことができます。 サンプル：

document.getElementById('location').addEventListener("click", function(e){ 
    e.preventDefault(); 
    addUrl(this); 
}); 

addUrl機能：

function addUrl(element){ 
    if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
      var lat = position.coords.latitude; 
      var lng = position.coords.longitude; 
      console.log(lat); 
      console.log(lng); 

      window.location.href = $(element).attr("href") + '?lat=' + lat + '&lng=' + lng; 
     }); 
    } 

    else 
     alert("navigator.geolocation is not available"); 
}