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

除了其他评论：

Selecting elements with their id是通过预先添加＆＃34;＃＆＃34;到了
使用函数attr(name, value)
在点击功能中，您可以使用$(this)

请参阅此工作代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个..

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

改变＆＃;; href＆＃39;使用JS / jQuery不能在第一次单击时工作

2 个答案: