CODEWITHSUNDEEP
javascriptjquery
HUNG
HUNG

Reputation: 535

Problems on .append() and .empty()

i have the following code that, if the #test button is click, a content will be generated in #currentActivities. There is another #hide button which simple hide the content of #currentActivities. My problem is if the first time i click #test, i can get the content. When i click #hide, the content of #currentActivities can be hidden as expected. However, if i click #test again, the content cannot be generated. I have tried to add $('#currentActivities').empty(); at the beginning, but seems not work. Can anyone help me and point out my problems?

$("#test").click(function() {

    $('#currentActivities').empty();

    $.ajax({
        type: "GET",
        dataType: "jsonp",
        jsonpCallback: "jsoncallback",
        data: {
            //some data here            
        },
        url: "http://mydomain.com/check.php?jsoncallback=?",
        success: function(data) {

            $.each(data, function(index, student) {
                $('#currentActivities').append(
                    '<li><a href="tutor_student_detail.html" data-name="' + data[index].data.NameA + '">' +
                    '<h4>' + data[index].data.NameA + '</h4>' +
                    '<p>' + data[index].data.NameA + '</p>' +
                    '</a></li>');

                $("li a").click(function() {
                    window.localStorage["view"] = $(this).data('name');
                    window.localStorage["Request"] = "true";
                }); //end of li a

            });
            $('#load2').hide();
            $('#filter').show();
            $('#currentActivities').listview('refresh');
        },
        error: function(jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        }
    });

    return false;
});

Upvotes: 0

Views: 57

Answers (1)

thecodeparadox
thecodeparadox

Reputation: 87073

You need to use delegate event (aka live event). Cause you're working with a dynamically loaded DOM elements.

Something like:

$('body').on('click', '#test', function() {

   // all code belong to click handler

});

For more on delegate event binding using .on() see here.

NOTE:

Instead of body user any static-container of all those newly loaded and appended element.

As your question is on jquery mobile so I think for live evnet delegation you can try something like:

$('#test').live('click', function() {

 // all codes belong to click hander

});

and another way is :

$(document).delegate('#test', 'click', function() {

  // codes

});

Upvotes: 3

Related Questions