CODEWITHSUNDEEP
jqueryajaxhtmljquery-mobile
MindFresher
MindFresher

Reputation: 740

jquery mobile's listview li item onclick not fired

I have problem in jquery mobile's listview.

listview build dynamically. onclick li item event is not fire and no error occurred.

Jquery function

function GetDependents() {
    var userid= checkCookie1(); 

    "use strict";
    var wcfServiceUrl = "http://xcxcxcx/PHRService/Service1.svc/XMLService/";
    $.ajax({
        url: wcfServiceUrl + "Dependents",
        data: "PatientID=" + userid + "",
        type: "GET",
        processData: false,
        contentType: "application/json",
        timeout: 10000,
        dataType: "json",
        cache:false,
        beforeSend: function (xhr) {
            $.mobile.showPageLoadingMsg();
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        },
        complete: function () {

            $.mobile.hidePageLoadingMsg();
        },

        success: function (data) {
            var result = data.GetDependentsResult;
            var items = [];

            $.each(result, function (i, item) {

                items.push('<li><a onclick=redirect(\'AddDependents.htm?id=' + item.ItemID + '\');\>' + item.ItemName + '</a></li>');
            });
            $('#main_list').append(items.join(''));
            $('#main_list').listview('refresh');
        },
        error: function (data) {

        }
    });

}

and HTML is

<div data-role="content" data-theme="c">
            <ul data-role="listview" id="main_list">
            </ul>
            <br />
            <a onclick="redirect('AddDependents.htm');" data-role="button" data-icon="plus">Add new...</a>
        </div>

Please help me to solve this problem.

Upvotes: 0

Views: 1574

Answers (1)

bipen
bipen

Reputation: 36531

calling an event is better than using inline javascript..

try this

HTML

items.push('<li><a id="'+ item.ItemID + '">' + item.ItemName + '</a></li>');

JQUERY

$('#main_list').on('click','a',function(e){
    e.preventDefault();
    var Id=$(this).attr('id');
    redirect('AddDependents.htm?id=' +Id );
});

since you are adding the element dynamically on delegated event should be used..

NOTE: i could see an extra closing for <a> tag

<a onclick=redirect(\'AddDependents.htm?id=' + item.ItemID + '\');\>'
                                                             //---^^---here

you have an extra \ is closing tag <a/>

Upvotes: 3

Related Questions