JQuery Parent изменить внутренний HTML - PullRequest
Новая
       21

JQuery Parent изменить внутренний HTML

3 голосов
/ 24 сентября 2010

Я получил это до сих пор: 

$('.event-tools a').click(function() 
{
    var status = $(this).attr('id');
    var id = $(this).parent().attr('id');

    $.ajax({
        type: "GET",
        url: "http://localhost:8888/update/test.php",
        data: "rsvp=" + status + '&id=' + id,
        success: function()
        {
            $(this).parent().html(status);
            //alert(status);
        },
        error: function()
        {
            alert('failz');
        }
    });
});

С этим: 

<span class="rsvp" id="1">
    <a href="#" class="rsvp" id="Attending">Attending</a>
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a>
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a>
</span>

Когда я нажимаю на одну из них и использую alert(), она работает, вызывая окно предупрежденияоднако, когда я использую $(this).parent().html(status); для события success:, он не меняет HTML с status ...

Ответы [ 2 ]

2 голосов
/ 24 сентября 2010

this внутри вашей успешной функции не имеет такой же области видимости, как и вне ее, поскольку JavaScript имеет область действия функции. Вам нужно сделать что-то вроде этого, чтобы сохранить исходное значение внешней функции this: 

var self = this;
$.ajax({
    // ...
    success: function() {
        $(self).parent().html(status);
    }
});

Кроме того, вы можете использовать jQuery .proxy() -метод : 

$.ajax({
    // ...
    success: $.proxy(function() {
        $(this).parent().html(status);
    }, this)
});
0 голосов
/ 24 сентября 2010

попробуйте

JS: 

$('.event-tools a').click(function(ev) 
{
    ev.stopPropagation()

    var status = $(this).attr('id'),
        id = $(this).parent().attr('id'),
        myparent = $(this).parent();

    $.ajax({
        type: "GET",
        url: "http://localhost:8888/update/test.php",
        data: "rsvp=" + status + '&id=' + id,
        success: function()
        {
            $(myparent).parent().html(status);
            //alert(status);
        },
        error: function()
        {
            alert('failz');
        }
    });
    return false;
});

HTML: 

<span class="event-tools" id="1"><!-- this has class = "rsvp" -->
    <a href="#" class="rsvp" id="Attending">Attending</a>
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a>
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a>
</span>
...