Highlight.js 如何在ajax调用后取消设置

问题描述 投票:0回答:1

我有一个加载模态窗口的 Jquery JS 脚本。在该模式窗口中有一个预代码标记,我通过 ajax 拉入脚本。我想使用Highlight.js来使代码更具可读性。

我现在已经设法让代码前标签中的代码正确突出显示。 但是当我关闭模态框并再次打开它时,代码不再突出显示,并且我的控制台显示此消息。

“之前突出显示的元素。要再次突出显示,请首先取消设置“dataset.highlighted”。”

如何“取消突出显示的数据集”?

这是我的代码。

    $(document).on('click','#codebutton', function(){
        var tTitle = $(this).attr('data-title')
        var tLink = $(this).attr('data-href')
        var tDesc = $(this).attr('data-desc')
 
        
        $('#codewindow').modal({
            transition: 'fade',
            duration: 500,
            onShow: function() {
              $('#codewindow').modal({
                transition: 'fade',
                duration: 1000
              })
            },
            onApprove: function(){
                $('#codewindow').modal('destroy');
            },
            onHide: function(){
                hljs.highlight.called = false;
            },
          }).modal('show');
            $.ajax({
                url : "BKND/Codes/"+tLink,
                dataType: "text",
                success : function (data) {
                    hljs.highlightAll($(".hg").html(data));
                },
                complete: function(data) {
                    $(".codeheader").html(tTitle)
                    $(".description p").html(tDesc)

                }
            });
        });
jquery ajax syntax-highlighting highlight highlight.js
1个回答
0
投票

尝试更新版本的代码:

$(document).on('click', '#codebutton', function () {
    var tTitle = $(this).attr('data-title');
    var tLink = $(this).attr('data-href');
    var tDesc = $(this).attr('data-desc');

    $('#codewindow').modal({
        transition: 'fade',
        duration: 500,
        onShow: function () {
            $('#codewindow').modal({
                transition: 'fade',
                duration: 1000
            });
        },
        onApprove: function () {
            $('#codewindow').modal('destroy');
        },
        onHide: function () {
            // Clear the 'highlighted' dataset attribute on close
            $('.hg').removeAttr('data-highlighted');
        },
    }).modal('show');

    $.ajax({
        url: "BKND/Codes/" + tLink,
        dataType: "text",
        success: function (data) {
            // Set new content and clear any prior highlighting
            $(".hg").html(data).removeAttr('data-highlighted');
            
            // Highlight the new content
            hljs.highlightAll();
        },
        complete: function () {
            $(".codeheader").html(tTitle);
            $(".description p").html(tDesc);
        }
    });
});
© www.soinside.com 2019 - 2024. All rights reserved.