通过ajax用jQuery脚本加载外部文件

Question

我使用.load快速测试了此内容滑块，使其进入下一个div区域。 当我将带有标记的脚本全部放在一个外部html文件中时，它可以正常工作。 但是，如果将脚本移到外部js文件中，则该函数不会启动。 如果我在十个html文件中具有相同的滑块且内容不同，那么是否真的需要在每个文件中放置脚本？ 我可以将脚本放入主要的外部js文件或页面标题中，并在每次请求时重新触发该脚本吗？

选择框.load方法：

var area = $(".selectboxarea");

$('Select').on('change', function () {  
    area.empty(); 
    var $this = $(this);
    var selected = $this.find('option:selected');
    var loadfile = selected.data('file');
    var selectfirst = $('.selectempty');
    var nextarea = $this.next('.selectboxarea');
    $(".searchselectbox").not(this).prop('selectedIndex',0);
    selectfirst.text('Select');
    var hide = $this.find('.selectempty').text('Hide');$this.find('.selectempty').toggleClass('hide'); 

 if (loadfile) {    // ******LOAD FILE INTO DIV*********
    nextarea.load(loadfile); 
    hide

 }else if (selected.hasClass('hide')) {
    selected.text('Select');
    selected.toggleClass('hide');

 }else { 
    var url = $this.val();
    if (url != '') {
    window.location.href = url
 }
    return false;
 }

});

滑块代码：

$(document).ready(function() {
    var thisItem = 1,nextItem = 0, range = 0, thisHeight = 70,
    $counter = $('#item_count'), $body = $('body');    

    //for each content item, set an id, and hide.
    $('.content_item').each(function() {
        nextItem++;
        $(this).attr('id', nextItem).hide();
    });

    //range contains how many content items exist
    range = nextItem, nextItem = 2, prevItem = range;

    //display the first content item
    $('#' + thisItem).show();
    $counter.html(thisItem + ' of ' + range);

    //hide old content item, show next item, resize content container
    $('#nextButton').click(function() {
        prevItem = thisItem;
        //update counter
        $counter.html(nextItem + ' of ' + range);
        //set focus to body so button is not selected,
        $body.focus();
        //get height of next content item to resize container
        thisHeight = $('#' + nextItem).height() + 20;
        //resize content container
        $('#content_container').animate({
            height : (thisHeight + 'px')
        }, 1000, 'swing');
        //hide old content item
        $('#' + thisItem).toggle('slide', {
            direction : 'left',
            easing : 'swing'
        }, 1000);
        //show next content item
        $('#' + nextItem).toggle('slide', {
            direction : 'right',
            easing : 'swing'
        }, 1000);

        //set old content item to current item
        thisItem = nextItem;
        //loop to first item if range reached
        if (thisItem >= range) {
            nextItem = 1;prevItem=range-1;
        } else {
            nextItem++;prevItem=thisItem-1;
        }
    });
    //end next click function


    //hide current content item, resize content container, show previous item 
    $('#prevButton').click(function() {

        //If we have reached the end range, the next item will be item #1
        if(nextItem==1){//so set the current item to the last
            thisItem=range;
        }else thisItem = nextItem - 1;

        //update counter
        $counter.html(prevItem + ' of ' + range);
        //set focus to body so button is not selected,
        $body.focus();
        //get height of next content item to resize container
        thisHeight = $('#' + prevItem).height() + 20;
        //resize content container
        $('#content_container').animate({
            height : (thisHeight + 'px')
        }, 1000, 'swing');
        //hide old content item
        $('#' + thisItem).toggle('slide', {
            direction : 'right',
            easing : 'swing'
        }, 1000);
        //show next content item
        $('#' + prevItem).toggle('slide', {
            direction : 'left',
            easing : 'swing'
        }, 1000);

        //set next content item to current item
        nextItem = thisItem;

        if (prevItem >= range) {//if at end of items
            nextItem = 1;//first
            prevItem = range -1;
            thisItem = range;
        } else if(prevItem <=1){//if at start of items
            prevItem = range;
            thisItem = 1;
            nextItem = 2;
        }else {//if in the middle of items
            prevItem--;
            thisItem--;
            }

    });
    //end prev click function

});

Demo1 （当脚本在每个外部html文件中时）

Demo2 （脚本在外部js文件中时不起作用）

下载文件

Answer 1

好的，这仍在进行中-但这应该可以帮助您。 您的代码有很多问题：

1）您没有将整个东西包裹在$(document).ready()

2）在旧代码中，您是在页面加载时执行此操作的：

$('.content_item').each(function() {
    nextItem++;
    $(this).attr('id', nextItem).hide();
});

如果内容在原始页面上，那就太好了-但是您没有该内容。 因此，要解决此问题，您需要删除该位-并进行以下更改：

nextarea.load(loadfile); 

至：

nextItem = 0;
nextarea.load(loadfile, function(result) {
    $('.content_item').each(function() {
        nextItem++;
        $(this).attr('id', nextItem).hide();
        total_found++;
    });
    console.log("Total: " + total_found);
    $('#item_count').html(total_found);
    hide;
    $('#1').show();
}); 

然后，至少获得ID和项目总数。 然后，您需要在脚本顶部附近添加一个新变量，当找到一个元素时，该变量将增加：

var total_found = 0;

至少应该使基础知识得到了运用-但是仍然需要做一些工作（一个奇怪的脚本TBH！）

希望这能使您走上正确的轨道！

Answer 2

而不是做：

$('#nextButton').click(function() {
  ...
});

尝试做：

$(document).on('click', '#nextButton', function() {
  ...
});

本质上，这会将事件附加到#nextButton的任何实例（当前在页面上，或将来在-或加载新的琐事时）。

在此处了解有关委托事件的更多信息：
https://api.jquery.com/on/#direct-and-delegated-events