在ajax.load调用后执行javascript时出现问题

Trouble executing javascript after ajax .load call

本文关键字：问题 javascript 执行 ajax load 调用      更新时间：2023-09-26

我对Jquery没有太多经验，并且在编写适当的回调函数时遇到了问题，因此在通过ajax.load（）调用加载html内容后，会执行一个单独的javascript函数。

以下代码加载外部html内容

$('#myID').find('a').on('click', function(){
    e.preventDefault();
    var $desc = $('#insert');
    switch($(this).attr('href')) {
        case 'content1.html' :
            $desc.load('fragments/content1.html');
            break;
        case 'content2.html' :
            $desc.load('fragments/content2.html');
            break;
    }
});

然后，必须在由上一个功能加载的html上执行以下代码

var panelWidth = 0;
var startPanel = 1;
window.panelWidth = $('.sp').width();   

$('.panel_container .hiw_panel').each(function(index){
    $(this).css({'width':window.panelWidth+'px','left':(index*window.panelWidth)});
    $('.sp .panels').css('width',(index+1)*window.panelWidth+'px');
});

$('.switcher span').each(function(){
    $(this).on('click', function(){
        changePanels( $(this).index() );
    });
});

function changePanels(newIndex){
var newPanelPosition = ( window.panelWidth * newIndex ) * -1;
$('.switcher span').removeClass('selected');
}

我删除了多余的内容，使其尽可能简洁。我只需要知道如何在第一部分之后执行第二部分。谢谢你的帮助！

嗯，可能是这样的：

$( '#myID' ).on( 'click', 'a', function( e ) {
    e.preventDefault();
    $( '#insert' ).load( $( this ).attr( 'href' ), function() {
        var panelWidth = 0;
        var startPanel = 1;
        window.panelWidth = $( '.sp' ).width();
        $( '.panel_container .hiw_panel' ).each( function( index ) {
            $( this ).css({
                'width': window.panelWidth,
                'left': ( index * window.panelWidth )
            });
            $( '.sp .panels' ).css({
                'width': ( index + 1 ) * window.panelWidth
            });
        });
        $( '.switcher span' ).each( function() {
            $( this ).bind( 'click', function() {
                changePanels( $( this ).index() );
            });
        });
    });
});
function changePanels( newIndex ) {
    var newPanelPosition = ( window.panelWidth * newIndex ) * -1;
    $( '.switcher span' ).removeClass( 'selected' );
}

它所做的是绑定到a单击，然后加载a标记的href属性，然后执行回调函数，即步骤2代码。（您可以在这里阅读更多关于.load（）的信息）；

我认为您的changePanels函数可能缺少一些东西，因为没有使用var，但这很容易整理。

给函数一个名称，例如executeAfterLoad（），并将其作为.load:的参数包含在内

case 'content1.html' :
        $desc.load('fragments/content1.html',executeAfterLoad);
        break;
case 'content2.html' :
        $desc.load('fragments/content2.html',executeAfterLoad);
        break;

我想您正在寻找：

$desc.load('fragments/content1.html', function(){
  //cb code here
});

第二个参数是在请求完成时执行的回调函数。

相关文章：