更改 '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>