2

jQuery は問題なく動作すると確信していますが、何らかの理由で私には向いていません。Ajaxが好きではないため、jsFiddleに入れることさえできませんが、関連するステートメント$(this).childrenはまったく機能しません。エラーが発生していません...何が間違っていますか?

JS

$('.submitNewOrder').submit( function() {
    $(this).children('input[type=\"submit\"]').prop('disabled',true); // Doesn't work
    $(this).children('.saving').fadeIn('fast');  // Doesn't work
    $.ajax({
        url: 'scripts/submitNewOrder.php?catID=1',
        data: newOrder,
        type: 'POST',
        mode: 'abort',
        success: function(){
            $(this).children('.saving').fadeOut('fast', function() { // Doesn't work
                $(this).children('.success').fadeIn('fast'); // Doesn't work
            });
        },
        error: function(){
            $(this).children('.error').fadeIn('fast'); // Doesn't work
        }
    });
    return false;
});

HTML

<form class="submitNewOrder">
    <p>
    <input type="submit" value="Save order" />
        <span class="saving" style="display:none">Saving changes...</span>
        <span class="success" style="display:none">Saved!</span>
        <span class="error" style="display:none">There was a problem saving :(</span>
    </p>
</form>
4

3 に答える 3

8

childrenを次のfindように置き換えてみてください。

$('.submitNewOrder').submit(function () {
    var $this = $(this);
    $this.find('input[type=\"submit\"]').prop('disabled', true); 
    $this.find('.saving').fadeIn('fast'); 
    $.ajax({
        url: 'scripts/submitNewOrder.php?catID=1',
        data: newOrder,
        type: 'POST',
        mode: 'abort',
        success: function () {
            $this.find('.saving').fadeOut('fast', function () { 
                $this.find('.success').fadeIn('fast'); 
            });
        },
        error: function () {
            $this.find('.error').fadeIn('fast'); 
        }
    });
    return false;
});
于 2013-07-02T11:11:30.957 に答える
3

ajax のコンテキスト オプションを使用し、.find()代わりに使用し.children()ます。

$.ajax({
        url: 'scripts/submitNewOrder.php?catID=1',
        data: newOrder,
        type: 'POST',
        mode: 'abort',
        context: this, //<< HERE so in callback functions, 'this' refers to the object, not options object of ajax call
        success: function(){
            $(this).find('.saving').fadeOut('fast', function() {
                $(this).find('.success').fadeIn('fast');
            });
        },
        error: function(){
            $(this).find('.error').fadeIn('fast');
        }
    });
于 2013-07-02T11:05:44.810 に答える
0

In要素submit thisへのポイントform。探している要素は の子ではなくform、 の子です<p>。式を に変更します$(this).find(...)。これにより、ツリーの 1 レベル以上下を検索します。

于 2013-07-02T11:13:35.423 に答える