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

我快速测试了一下如何使用

.load

将其拉入下一个div区域。当我将带有标记的脚本放在一个外部html文件中时，效果很好。但是，如果将脚本移动到外部js文件中，该函数将不会启动。如果我在十个html文件中有相同的滑块和不同的内容，我真的需要将脚本放在每个文件中吗？ 我可以将脚本放入我的主外部js文件或页面标题中，并在每次请求时重新触发它吗

选择框

。加载
方法：

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

});

$（文档）.ready（函数（）{
var thisItem=1，nextItem=0，range=0，thisHeight=70，
$counter=$（'item#u count'），$body=$（'body'）；
//对于每个内容项，设置一个id，然后隐藏。
$（'.content_item'）。每个（函数（）{
nextItem++；
$（this.attr（'id'，nextItem）.hide（）；
});
//范围包含存在多少内容项
range=nextItem，nextItem=2，previitem=range；
//显示第一个内容项
$（'#'+此项）.show（）；
$counter.html（thisItem+'of'+范围）；
//隐藏旧内容项、显示下一项、调整内容容器大小
$（“#下一个按钮”）。单击（函数（）{
PreviItem=此项；
//更新计数器
$counter.html（nextItem+'of'+范围）；
//将焦点设置为body，使按钮不被选中，
$body.focus（）；
//获取要调整容器大小的下一个内容项的高度
thishheight=$（'#'+nextItem）.height（）+20；
//调整内容容器的大小
$（“#内容_容器”）。设置动画({
高度：（此高度+px）
}，1000，'摆动'；
//隐藏旧内容项
$（“#”+此项）。切换（'slide'{
方向：'左'，
放松：“摇摆”
}, 1000);
//显示下一个内容项
$（“#”+nextItem）.toggle（'slide'{
方向：'对'，
放松：“摇摆”
}, 1000);
//将旧内容项设置为当前项
此项=下一项；
//如果达到范围，则循环到第一项
如果（此项>=范围）{
nextItem=1；PreviItem=range-1；
}否则{
nextItem++；PreviItem=thisItem-1；
}
});
//结束下一步单击功能
//隐藏当前内容项、调整内容容器大小、显示上一项
$（“#prevButton”）。单击（函数（）{
//如果我们已经到达终点范围，下一项将是第1项
如果（nextItem==1）{//，则将当前项设置为最后一项
此项=范围；
}else thisItem=nextItem-1；
//更新计数器
$counter.html（previitem+'of'+范围）；
//将焦点设置为body，使按钮不被选中，
$body.focus（）；
//获取要调整容器大小的下一个内容项的高度
thishheight=$（'#'+previitem）.height（）+20；
//调整内容容器的大小
$（“#内容_容器”）。设置动画({
高度：（此高度+px）
}，1000，'摆动'；
//隐藏旧内容项
$（“#”+此项）。切换（'slide'{
方向：'对'，
放松：“摇摆”
}, 1000);
//显示下一个内容项
$（'#'+previitem）.切换（'幻灯片'{
方向：'左'，
放松：“摇摆”
}, 1000);
//将下一个内容项设置为当前项
nextItem=该项目；
if（previItem>=范围）{//if在项目末尾
nextItem=1；//第一个
PreviItem=范围-1；
此项=范围；
}否则如果（previitem而不是执行：

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

试着做：

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

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

在此处了解有关委派事件的更多信息：
好的，这仍然是一项正在进行的工作-但它应该可以让您继续。您的代码有很多问题：

1） 您没有将整个内容包装在
$（document.ready（）

2） 在旧代码中，您在页面加载时执行以下操作：

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

如果内容位于原始页面上，那么这一切都很好，但您没有。因此，要解决此问题，您需要删除该位，然后更改：

nextarea.load(loadfile); 

致：

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

var total_found = 0;

这至少可以让基础工作顺利进行——但仍有一些工作需要做（有点奇怪的脚本TBH！）

希望这会让你走上正轨！
你能澄清一下吗。你是说它不起作用，除非你在页面中通过
.load（）
文件加载了所有JS代码？看起来很奇怪-好像我没记错，
.load（）
实际上去掉了（并且没有运行）其中的JS代码（为了安全起见）另外-您是否尝试过确保HTML页面中确实包含
？因为这也可能会导致问题（因为它无法识别它是HTML页面）@andrownewb我已经测试了一段时间，怀疑
$（document）.ready（function（）{
使幻灯片切换失败。你能制作一个ZIP文件，然后上传到某个地方，这样我们就可以玩所有的文件了吗？我们自己玩可能会更容易，看看会发生什么on@AndrewNewby当然可以。给你。正在处理。它更近了。当滑块加载时，“下一步”或“上一步”按钮至少在最初有响应d、 非常感谢！关于
nextarea.load（loadfile，function（result）{
，如果选择框也加载其他类型的文件（例如所有文本文件），是否需要设置一个if语句，以便
函数（result）
仅对包含滑块的文件执行？是的，如果加载多个滑块实例，还需要确保
var total_found = 0;