更改 'HREF' 使用JS/jQuery的不工作的第一次點擊

Question

有了這個簡單的HTML：

<a id="show-modal-button" class="circle modal" href='#' > 
    <i class="fa fa-plus circle-inner-icon"></i> 
</a> 

而且這個腳本。

<script type="text/javascript"> 

    window.addEvent('domready', function() 
    { 
     $('show-modal-button').onclick = function(ev) {    
      ev.preventDefault(); 
      modalUrl = 'http://www.google.es' 
      $('show-modal-button').href = modalUrl; 
      console.log($('show-modal-button').href); 
      return false; 
     }); 
    }); 
</script> 

它不適用於第一次點擊。模態在第一次點擊時打開，但沒有顯示（空白模式）。如果關閉模式並再次點擊按鈕，模式將正確顯示href頁面（在上面的示例中爲google）。

我讀過一些其他線程有同樣的問題，人們解決它加入return false;，但我補充說，並沒有工作。

的console.log打印在第一次點擊。我還測試了$('show-modal-button').addEvent('click', function (ev) {沒有運氣:(

任何想法如何使在第一學嘗試？

Answer 1

這項工作試試這個正確的網址..

<script type="text/javascript"> 

    $(function(){ 
$('show-modal-button').click(function(ev) {    
      ev.preventDefault(); 
      modalUrl = 'http://www.google.es' 
      $('show-modal-button').href = modalUrl; 
      console.log($('show-modal-button').href); 
      return false; 
}); 
}); 

</script> 

Answer 2

除了其他意見：

• jQuery中

  Selecting elements with their id是在前面加上「＃」的ID

• 改變jquery的元素的屬性，通過使用功能attr(name, value)

• 內，您的點擊功能所做的一切，你可以參考通過使用$(this)

您的jQuery元素見該工作片段：

$(function(){ 
 
\t $("#show-modal-button").click(function(e){ 
 
    \t e.preventDefault(); 
 
    var modalUrl = 'http://www.google.es'; 
 
    $(this).attr('href', modalUrl); 
 
    console.log($(this).attr('href')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="show-modal-button" class="circle modal" href='#' > 
 
    <i class="fa fa-plus circle-inner-icon">show modal</i> 
 
</a>