从弹出窗口读取Javascript错误

javascript error reading from popup

本文关键字：Javascript 错误 读取 窗口      更新时间：2023-09-26

我有这段代码，一直抛出一个错误的onclick。我已经搜索，但没有发现任何接近这种类型的代码导致此错误。主要是ajax呼叫的问题。这不是ajax调用。开发工具告诉我它发生在这行代码

<html>

我觉得这并没有真正讲述整个故事。错误是- 

Uncaught SyntaxError: Unexpected token }

代码如下:

<a href="javascript:void(0);"
        data-toggle="popover"
        data-container="body" 
        data-placement="right"  
        data-trigger="focus" 
        data-content="<i class='fa fa-envelope-o fa-lg'></i> <a href='#contact' id='share-email' onclick='scrollElement('#contact')'>info@h3webelements.com</a><br>
            <i class='fa fa-phone fa-lg'></i> 405.456.9447<br>
            <i class='fa fa-globe fa-lg'></i><a href='#footer' onclick='scrollElement('#footer')'> Warr Acres, Oklahoma</a><br>
            <i class='fa fa-twitter-square fa-lg'></i><a href='http://www.twitter.com/h3webelements' target='_blank'> @H3WebElements</a><br>
            <i class='fa fa-facebook-official fa-lg'></i><a href='https://www.facebook.com/H3WebElements' target='_blank'> H3 Web Elements</a></br>"
        data-html="true">
        <i class="fa fa-user fa-3x"></i></a>
Javascript: 

function scrollElement (target) {
     $('html, body').animate({
          scrollTop: $(target).offset().top
      }, 1500);
 }

请注意，scrollElement函数在页面的其他方面工作良好-例如navbar。我相信这个问题是在我使用的链接的data-content部分作为一个固定位置元素的弹出窗口。我被迫使用单个'引号。我试图逃离''和使用'"，但这只是结束了打破一切。它的功能应该是滚动到元素，就像我的导航条已经做的那样，现在它只是把它直接带到选定的元素。

谢谢

问题确实在于重复的单引号:

onclick='scrollElement('#contact')'

由于这段代码位于属性值中，我们可以使用HTML实体进行转义引号:

onclick=&quot;scrollElement('#contact')&quot;

下面是一个工作片段。请注意，只有弹出窗口中的电子邮件链接已被更正:

jQuery(function($){
   $( 'a' ).popover();
})
function scrollElement(target) {
  console.log("scrollElement", target);
     $('html, body').animate({
          scrollTop: $(target).offset().top
      }, 1500);
 }
#contact { position: relative;top:1000px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<a href="javascript:void(0);"
        data-toggle="popover"
        data-container="body" 
        data-placement="right"  
        data-trigger="focus" 
        data-content="<i class='fa fa-envelope-o fa-lg'></i> <a href='#contact' id='share-email' onclick=&quot;scrollElement('#contact')&quot;>info@h3webelements.com</a><br>
            <i class='fa fa-phone fa-lg'></i> 405.456.9447<br>
            <i class='fa fa-globe fa-lg'></i><a href='#footer' onclick='scrollElement('#footer')'> Warr Acres, Oklahoma</a><br>
            <i class='fa fa-twitter-square fa-lg'></i><a href='http://www.twitter.com/h3webelements' target='_blank'> @H3WebElements</a><br>
            <i class='fa fa-facebook-official fa-lg'></i><a href='https://www.facebook.com/H3WebElements' target='_blank'> H3 Web Elements</a></br>"
        data-html="true">
        <i class="fa fa-user fa-3x"></i></a>
<div id='contact'>Test!</div>

相关文章：