Question

我对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');
}

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

Answer 1

嗯，这样的事情可能是：

$( '#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点击，然后加载href标签的a属性，然后执行回调函数，这是您的第2步代码。（您可以阅读有关.load（）here）;

的更多信息

我认为changePanels函数可能会遗漏某些内容，因为var未被使用，但这很容易整理。

Answer 2

我认为你在寻找：

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

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

Answer 3

为您的函数命名 - 例如executeAfterLoad（） - 并将其包含为argument of .load：

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

麻烦在ajax .load调用后执行javascript

3 个答案: