CODEWITHSUNDEEP
javascriptjqueryhtmllistviewjquery-mobile
nshah
nshah

Reputation: 597

Jquery Mobile - onclick not working

The function occurs before anything is clicked... such as enter image description here

When i click the name ^ fdsa, for exampmle, i need the id to pop up, but it automatically happens when the page is loaded for some reason

HTML

<ul data-role="listview" id="ccontent" data-inset="true">

</ul>

JS

function getClubs() {
    $.ajax({
        url: 'some url',
        crossDomain: true,
        type: 'post',
        data: '',
        success: function (data) {
            $('#ccontent').empty();
            var json = jQuery.parseJSON(data);
            for (var i = 0; i < json.length; i++)
            $('#ccontent').append('<li><a href=\"#\"+onclick=\"' + getData(json[i].id) + '\" rel="external">' + json[i].name + '</a></li>');
            $('#ccontent').listview('refresh');
        },
    });
}

function getData(id) {
    $('#clubcontent').append ('<li>'+id+'</li>');
    $('#clubcontent').listview('refresh');
};

Upvotes: 0

Views: 3517

Answers (1)

Joe
Joe

Reputation: 15558

I think this is what you're looking for:

$(document).on('click', '#ccontent li a', function () {
    getData($(this).data('club-id'));
});

function getClubs() {
    $.ajax({
        url: 'some url',
        crossDomain: true,
        type: 'post',
        data: '',
        success: function (data) {
            $('#ccontent').empty();
            var json = jQuery.parseJSON(data);
            for (var i = 0; i < json.length; i++)
            $('#ccontent').append('<li><a href="#" data-club-id="' + json[i].id + '" rel="external">' + json[i].name + '</a></li>');
            $('#ccontent').listview('refresh');
        }
    });
}

.on() is used instead of an inline onclick event. club-id is used to store the id which is used in the getData() function.

Upvotes: 2

Related Questions