jquery mobile的listview li item onclick没有被解雇

时间:2013-03-28 16:28:42

标签: jquery ajax html5 jquery-mobile

我在jquery mobile的listview中遇到问题。

listview动态构建。 onclick li item事件不会触发,也不会发生错误。

Jquery函数

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) {

        }
    });

}

和HTML

<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>

请帮我解决这个问题。

1 个答案:

答案 0 :(得分:3)

调用事件比使用内联javascript更好..

试试这个

<强> 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 );
});

因为你要动态添加元素on应该使用委托事件..

注意:我可以看到<a>代码

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

您还有一个额外的\正在结束标记<a/>