Question

我的函数在没有使用附加div中的类的情况下运行得很完美，但是当我尝试在元素上添加class时，它无效。

<head>
    <script type="text/javascript">
        function showt(id){
            $('body').append(id)
        }
    </script>
</head>

<body>
    <a href="#" id="hidemain" onmouseover='showt("<div class='sdf'>appended</div>")'>show detail</a>
</body>

Answer 1

在其他引号中使用时，只需转义引号。还可以使用属性中的相应其他引号。因此，如果您将该属性括在"中，只需使用内部的'和\'以及vica verse。（感谢@nnnnnn提到这个！）

<a href="#" id="hidemain" onmouseover="showt('<div class=\'sdf\'>appended</div>')">show detail</a>

或

<a href="#" id="hidemain" onmouseover='showt("<div class=\"sdf\">appended</div>')">show detail</a>

修改

为了获取事件对象，您应该以编程方式添加事件处理程序：

<a href="#" id="hidemain">show detail</a> <script> document.getElementById( 'hidemain' ).addEventListener( 'click', function( event ) { showt( '<div class="sdf">appended</div>' ); // here you have access to event and thus event.pageX }); </script>

Answer 2

由于您使用jQuery标记了您的问题，因此这里是使用mouseover处理程序而不是onmouseover属性的jQuery版本，它完全取消了引号的转义。

<head>
    <!-- include jquery.js here -->
    <script type="text/javascript">
        $(function() {
            $('#hidemain').mouseover(function() {
                showt('<div class="sdf">appended</div>');
            });
        });

        function showt(id){
            $('body').append(id)
        }
    </script>
</head>

<body>
    <a href="#" id="hidemain">show detail</a>
</body>

Answer 3

如果你已经在使用jQuery，那么你可以这样做：

$(function() {
    function showt(domElement){
        $('body').append(domElement)
    }

    $("#hidemain").mouseover(function() {
        showt($("<div />").addClass("sdf").text("test"));
    });
})

Answer 4

您需要使用\转义嵌入式引号：

<a href="#" id="hidemain" onmouseover='showt("<div class=\"sdf\">appended</div>")'>show detail</a>

请注意，我也将内部引号更改为双引号以及转义它们，因为如果外部引号是围绕html元素属性使用相同类型的引用，则即使在转义时也可能无效。

Answer 5

你可以尝试这个：

onmouseover='showt("<div class=\'sdf\'>appended</div>")'

这些引号需要转发'\'。

如何在内联javascript函数中转义引号

5 个答案: