Javascript 改变'；href'；使用JS/jQuery在第一次单击时不起作用

具有以下简单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>

addEvent（'domready'，function（）
{
$（'show-modal-button'）。onclick=function（ev）{
ev.preventDefault（）；
莫达卢尔http://www.google.es'
$（'show-modal-button'）。href=modalUrl；
log（$（'show-modal-button'）.href）；
返回false；
});
});

它在第一次点击时不起作用。模式在第一次单击时打开，但未显示任何内容（空白模式）。如果我关闭模式并再次单击按钮，则模式将正确显示href页面（在上面的示例中为google）

我读过其他一些有同样问题的线程，人们通过添加

returnfalse来解决它
console.log
在第一次单击时打印正确的url。。我还使用
$（'show-modal-button'）进行了测试。addEvent（'click'，function（ev）{
没有运气：(

你知道如何在第一次尝试时就做到这一点吗？
试试这个

    <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>


$（函数（）{
$（'show-modal-button'）。单击（函数（ev）{
ev.preventDefault（）；
莫达卢尔http://www.google.es'
$（'show-modal-button'）。href=modalUrl；
log（$（'show-modal-button'）.href）；
返回false；
});
});
除其他注释外：


在jquery中，通过在id前面加“#”来完成

在jquery中更改元素的属性是通过使用函数完成的

在click函数中，可以使用


请参阅此工作片段：


$（函数（）{
$（“#显示模式按钮”）。单击（功能（e）{
e、 预防默认值（）；
var modalUrl='1〕http://www.google.es';
$（this.attr（'href'，modalUrl）；
console.log（$（this.attr（'href'））；
});
})；

奇怪的代码
$（'show-modal-button'）。onclick
？jQuery和本机JS的混合您缺少
}
处理程序函数如果您在应用程序中使用jQuery，请使用jQuery提供的所有功能。不要与jQuery和JavaScript混合。使用$（文档）。ready（函数（）{}）；而不是使用window.addEvent（'domready…如上所述，对您的domready使用纯jQuery。请参阅下面的我的ans，希望它有帮助：）