Question

当使用jquery悬停在超链接上时，我将div标签（此div标签位于html部分中）附加另一个div标签（此div标签位于脚本中）。

现在，问题是当我第一次在链接上悬停时加载页面后，它会附加div肯定但是它不附加div标签。所以我只是对它感到困惑。

请帮我解决问题。

在这里，我正在提供一些代码。

<script id="CollegeInfo" type="text/html">
<div id="${CollegeId}">
    <table width="400px">
    <tr>
        <td colspan="3">
            <div  class="clgname">
            {{html CollegeName}}
            </div>
        </td>
    </tr>
    <tr style='color:Gray;'>
        <td>
        </td>
        <td width="10px">
        </td>
        <td valign="top" style='font-size:12px;'>
            <b>Rating :</b></br>
            <div class="grating"></div> // Div tag with whom I am binding html part div tag...
        </td>
    </tr>
    </table>
</div>
</script>

Jquery部分：

<script type="text/javascript">
$(function(){
    $(".name").mouseover(function (e) {
        var id = $(this).attr("id");

        $.ajax({
            type: "POST",
            url: "College.asmx/GetInfo",
            data: "{'Id':" + id + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                var info = response.d;
                $("#tbodyCollegeInfo").html($("#CollegeInfo").tmpl(info));

                var block_element = $("#rating");
                $('.grating').append(block_element);

                $('#hdndivCollegeInfo').attr("style","display:block;");
            }
        });
    });
});
</script>

HTML部分：

<div id="hdndivCollegeInfo" style="display: none;">
        <div class="hoverpreview">
            <div id="rating" class="rating">
                <asp:Rating ID="rtng" runat="server" BehaviorID="rating" ReadOnly="true" StarCssClass="StarCss"
                    FilledStarCssClass="FilledStarCss" EmptyStarCssClass="EmptyStarCss" WaitingStarCssClass="WaitingStarCss">
                </asp:Rating>
            </div>
            <table>
                <tbody id="tbodyCollegeInfo">
                </tbody>
            </table>
        </div>
    </div>

Answer 1

试试这个

        var block_element = $("#rating").outerHtml();
        $('.grating').append(block_element);

编辑：你在网页上收到任何错误吗？它是否达到了ajax调用的成功部分？

Answer 2

Don't use html tags inside the script directly. use like this
<script id="CollegeInfo" type="text/html">
var appendHtml=
'<div><table width="400px">
<tr>
        <td colspan='3'>
            <div  class='clgname'>            
            </div>
        </td>
    </tr>
    <tr style='color:Gray;'>
        <td>
        </td>
        <td width='10px'>
        </td>
        <td valign='top' style='font-size:12px;'>
            <b>Rating :</b></br>
            <div class='grating'></div>
        </td>
    </tr>
    </table></div>';

</script> 

In the ajax edit as $('.grating').append(appendHtml);

div不是使用jquery追加另一个div

2 个答案: