我的jQuery队列函数第一次运行失败

Question

<input id='lightson' class="buttonl" type="button" value="On" />
<input id='lightsoff'  class="buttonl" type="button" value="Off" />
<p class="status2"></p>
<script type="text/javascript">
$('#lightson').click( function(){
    $.get('http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka());
    function callbacka(){
        $('.status2').load('status2.php').delay(3000).queue(function() {
            $(this).empty();
        });
    }
});
$( '#lightsoff' ).click( function () {
    $.get('http://<?php echo $_SESSION['ip']?>/?3', {}, callbackb());
    function callbackb(){
        $('.status2').load('status3.php').delay(3000).queue(function() {
            $(this).empty();
        });
    } 
});
</script>

当我点击lightson时，我想加载一些东西到我的div中，并在三秒钟后清空它。另外，当我单击lightsoff时，我想加载其他东西，并在三秒钟后清空它，因为两个按钮使用相同的div。

此代码只工作一次。当我的页面加载，我点击两个按钮之一(这并不重要，哪个按钮)它的工作，但如果我点击另一个按钮，它加载的信息在div，但不清空它。

我的新代码是:

<input id='lightson' class="buttonl" type="button" value="On" />
<input id='lightsoff'  class="buttonl" type="button" value="Off" />
<p class="status2"></p>
<script type="text/javascript">
$('#lightson').click(function(){
    $.get('http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka());
    function callbacka() {
        $('.status2').load('status2.php').delay(3000).queue(function(){
            $('.status2').empty().dequeue();
        });
    }
});
$('#lightsoff').click( function () {
    $.get('http://<?php echo $_SESSION['ip']?>/?3', {}, callbackb());
    function callbackb(){
       $('.status2').load('status3.php').delay(3000).queue(function() {
           $('.status2').empty().dequeue();
       });
    } 
});
</script>

描述我想要的上面的代码:我有两个按钮。当我单击其中一个时，我想将值"2"发送到url，并在类status2中加载status2.php的内容，并在3secs后清空类status2。如果我点击另一个按钮。我认为上面的代码做的工作。如果我从回调中删除"()"，当我点击按钮时，只发送值"2"，其他什么都不发生。

Answer 1

不要把()放在callbacka/callbackb之后。这将调用它们并将$.get的回调设置为返回值(在您的示例中为undefined)。

$.get( 'http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka );

另外，delay只适用于动画。要在load完成后等待3秒，在load回调中使用setTimeout。

$('.status2').load('status2.php', function() {
    var $this = $(this);
    setTimeout(function(){
       $this.empty();
    }, 3000);
});

Answer 2

要使其与动态添加的内容一起工作，请将您的事件与on连接

 $(document).on("click", "#lightson", function () {
    var $status = $('.status2');
    $status.load('status2.php', function() {
        setTimeout(function() { $status.empty(); }, 3000); 
    });
 }

我成功地测试了这一点，但我不认为我能让ajax加载工作在一个fiddle:)

Answer 3

<script type="text/javascript">
    $( '#lightson' ).click( function () {
            $.get( "http://<?php echo $_SESSION['ip']?>/?2" );
            callbacka();
    } );
     function callbacka() {           
                $( '.status2' ).load( 'status2.php' ).delay( 3000 ).queue( function() {
                    $('.status2').empty().dequeue();
                });
    }
    $( '#lightsoff' ).click( function () {
            $.get( 'http://<?php echo $_SESSION['ip']?>/?3' );
            callbackb();
    } );
    function callbackb() {
                $( '.status2' ).load( 'status3.php' ).delay( 3000 ).queue( function() {
                    $( '.status2' ).empty().dequeue();
                });
    }
</script>