如何告诉程序刷新元素的值

Question

How can refresh an html element when its value is changing. I mean assume that i have this tag:

<div id="response" style="display:none;"><div>

and i have this script:

<script type="text/javascript">
    $('#delete_link').click(function(e) {
        e.preventDefault();
        $('#result').html('').load('{% url messages_delete message.id %})
        alert($('#result').html());
        $('#'+$('#result').html()+'_list').trigger('click');
    });
</script>

when user clicks on delete_link, the server sends a value to response div, so response div which was empty before, now has a value, and i will use it's value to know which tab i should trigger. when i use alert, it understands that the value of this tag is changed, and the trigger works. but without alert, it seems it doesn't understand the value is changed and trigger doesn't work. Is there a way to tell the program that the value is changed? i don't want to use alert. thanks very much for your help

Answer 1

.Load() is asynchronous, you need to set your content html in the load callback function.

 $('#delete_link').click(function(e) {
        e.preventDefault();
        $('#result').html('').load('{% url messages_delete message.id %}',function(){
           $('#'+$('#result').html()+'_list').trigger('click');
        });
    });

Answer 2

AJAX is asynchronous, you can use the load callback function which is executed after request is complete.

$('#delete_link').click(function(e) {
    e.preventDefault();
    $('#result').load('url', function(){
       $('#'+ $(this).html() +'_list').click()
    })
});

Note that load before adding new markup, removes the current markup of the element, so using html('') is redundant.