Question

我已经尝试了其他文章中列出的关于事件绑定的多种选择，但是它似乎没有用。该代码曾经使用过纯HTML，但仍在本地运行。但是，托管时，它不能100％地工作。

HTML和JS / AJAX代码：

<b>Login with username and password: </b> <font color="green">${BUILD_LOG_REGEX, regex=".*Finished running SoapUI testcase \\[Login with username and password\\].*status: FINISHED", showTruncatedLines=false, substText="SUCCESS"}</font>
<font color="red">${BUILD_LOG_REGEX, regex=".*Finished running SoapUI testcase \\[Login with username and password\\].*status: FAILED", showTruncatedLines=false, substText="FAILED"}</font>

JavaScript：

<ul class="cd-faq-categories" id="onderwerp">

</ul> <!-- cd-faq-categories -->

<script>
    //De categoriën ophalen uit het JSON bestand en weergeven in het menuvenster
    $.getJSON("vragenlijst.json", function (data) {

        // create a string of the object 
        data = JSON.stringify(data);

        // Parse the data
        const questions = JSON.parse(data);

        dataNew = questions.sort((a, b) => {
            if (a.category < b.category) //sort string ascending
                return -1
            if (a.category > b.category)
                return 1
            return 0 //default return value (no sorting)
        })

        const newData = {}
        questions.forEach(item => {
            newData[item.category] = item
        })

        const liTemplate = (category) => `<a class="account" href="#${category}">${category}</a>`

        for (item in newData) {
            var child = document.createElement('li');
            child.innerHTML = liTemplate(newData[item].category);
            document.querySelectorAll('.cd-faq-categories')[0].appendChild(child);
        }
    });

</script>

HTML / JS / AJAX代码生成可单击的类别列表，并请参阅包含该类别中问题和答案的部分。

滚动浏览带有问题和答案的页面时，滚动到另一个类别部分时必须更改所选的类别。

我该怎么做？我尝试将其从$(document).ready(function($){ var MqL = 1024; var faqsSections = $('.cd-faq-group'), faqsContainer = $('.cd-faq-items'), faqsCategoriesContainer = $('.cd-faq-categories'), closeFaqsContainer = $('.cd-close-panel'); //update category sidebar while scrolling $(window).on('scroll', function(){ if ( $(window).width() > MqL ) { (!window.requestAnimationFrame) ? updateCategory() : window.requestAnimationFrame(updateCategory); } }); $(window).on('resize', function(){ if($(window).width() <= MqL) { faqsCategoriesContainer.removeClass('is-fixed').css({ '-moz-transform': 'translateY(0)', '-webkit-transform': 'translateY(0)', '-ms-transform': 'translateY(0)', '-o-transform': 'translateY(0)', 'transform': 'translateY(0)', }); } if( faqsCategoriesContainer.hasClass('is-fixed') ) { faqsCategoriesContainer.css({ 'left': faqsContainer.offset().left, }); } }); function updateCategory(){ updateCategoryPosition(); updateSelectedCategory(); } function updateCategoryPosition() { var top = $('.cd-faq').offset().top, height = jQuery('.cd-faq').height() - jQuery('.cd-faq-categories').height(), margin = 20; if( top - margin <= $(window).scrollTop() && top - margin + height > $(window).scrollTop() ) { var leftValue = faqsCategoriesContainer.offset().left, widthValue = faqsCategoriesContainer.width(); faqsCategoriesContainer.addClass('is-fixed').css({ 'left': leftValue, 'top': margin, '-moz-transform': 'translateZ(0)', '-webkit-transform': 'translateZ(0)', '-ms-transform': 'translateZ(0)', '-o-transform': 'translateZ(0)', 'transform': 'translateZ(0)', }); } else if( top - margin + height <= $(window).scrollTop()) { var delta = top - margin + height - $(window).scrollTop(); faqsCategoriesContainer.css({ '-moz-transform': 'translateZ(0) translateY('+delta+'px)', '-webkit-transform': 'translateZ(0) translateY('+delta+'px)', '-ms-transform': 'translateZ(0) translateY('+delta+'px)', '-o-transform': 'translateZ(0) translateY('+delta+'px)', 'transform': 'translateZ(0) translateY('+delta+'px)', }); } else { faqsCategoriesContainer.removeClass('is-fixed').css({ 'left': 0, 'top': 0, }); } } function updateSelectedCategory() { faqsSections.each(function(){ var actual = $(this), margin = parseInt($('.cd-faq-title').eq(1).css('marginTop').replace('px', '')), activeCategory = $('.cd-faq-categories a[href="#'+actual.attr('id')+'"]'), topSection = (activeCategory.parent('li').is(':first-child')) ? 0 : Math.round(actual.offset().top); if ( ( topSection - 20 <= $(window).scrollTop() ) && ( Math.round(actual.offset().top) + actual.height() + margin - 20 > $(window).scrollTop() ) ) { activeCategory.addClass('selected'); }else { activeCategory.removeClass('selected'); } }); } });函数中删除，但这似乎不起作用。我也尝试过将$(document).ready更改为$(window)，但这似乎也不起作用。

将$(document)函数放入HTML / AJAX / JS代码中的$(document).ready函数之后调用的函数中，似乎也不是100％的时间都有效... < / p>

Answer 1

发出ajax请求后，需要调用代码以获取JSON并构建HTML。因此，将代码放入函数中，并在构建完HTML后调用它

function initializeCode () {  
  var MqL = 1024;
  /* The rest of your code in document.ready() */
}

并且在调用Ajax之后，请使用done并调用函数

$.getJSON( /* your code */).done(initializeCode);

Answer 2

由于某种原因，拥有包含我的代码的单独JavaScript文件会导致一些可靠性问题。这导致它不能100％地（或根本不）正常工作。

将我所有的JavaScript代码放入HTML文件本身即可解决问题。

在动态创建的AJAX元素上使用$（window）进行事件绑定

2 个答案: