Question

美好的一天，我几乎不知道如何在id标签处绑定价值<li>

我的ajax

//AJAX MENGAMBIL KATEGORI SEKOLAH
$.getJSON('http://localhost/aplikasi/assets/www/include/kategori.php', function(data) {
    console.log(data); //Untuk melihat data yang berhasil diambil di firebugs
    results = data.items; //Menampung array ke dalam variabel results

    //menggunakan fungsi each untuk membuat elemen list, sesuai banyaknya array
    $.each(results, function (index, kategori) {
        var html;

        //Membuat element list untuk setiap kategori
        html = '<li id="klik" data-katid="';
        html += kategori.kat_id;
        html += '"><a id="klik2" data-transition="slide" href="#list" OnClick="carisekolah()">';
        html += kategori.kat_nama; 
        html += '</a></li>';

        //Memasukkan ke dalam unordered list        
        $('#kategorisekolah').append(html);
    });

    //Refresh list
    $('#kategorisekolah').listview('refresh');

    //Memberikan fungsi ke setiap element 
    $("#listsekolah").children("li").bind("click", function (e) {
        carisekolah($(this).attr("data-katid"));
    });

});

function carisekolah(id) {
    $.getJSON('http://localhost/aplikasi/assets/www/include/list.php?id=' + id, function(data) {
        console.log(data); //Untuk melihat data yang berhasil diambil di firebugs
        results = data.items; //Menampung array ke dalam variabel results
        $('#listsekolah').empty();
        //menggunakan fungsi each untuk membuat elemen list, sesuai banyaknya array
        $.each(results, function (index, sekolah) {
            var html;

            //Membuat element list untuk setiap sekolah
            html = '<li data-sekid="' + sekolah.content_id + '">';
            html += '<h2>' + sekolah.content_nama + '</h2>'; 
            html += '<p>' + sekolah.content_alamat + '</p>'; 
            html += '<p> Telepon : ' + sekolah.content_telepon + '</p>'; 
            html += '</li>';


            //Memasukkan ke dalam unordered list        
            $('#listsekolah').append(html);
        });

        //Refresh list
        $('#listsekolah').listview('refresh');

    });
}

我的HTML

<body>
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Aplikasi Pencarian Sekolah</h1>
    </div>

    <div data-role="content">
        <p> Selamat datang di aplikasi pencarian sekolah..<br /><br />
            Silahkan memilih kota..
        </p>
        <a href="#kategori" data-role="button" data-inset="true"> JABODETABEK </a>
    </div>
</div>
<div data-role="page" id="kategori">
    <div data-role="header">
        <h1>Aplikasi Pencarian Sekolah</h1>
    </div>

    <div data-role="content">
        <ul id="kategorisekolah" data-role="listview" data-inset="true"></ul>
    </div>
</div>

<div data-role="page" id="list" data-add-back-btn="true" data-back-btn-text="Kembali">
    <div data-role="header">
        <h1>List Sekolah</h1>
    </div>

    <div data-role="content">
        <!-- Format list Jquery Mobile menggunakan fitur 'Pencarian' -->
        <ul id="listsekolah" data-role="listview" data-filter="true" data-filter-placeholder="Cari sekolah..." data-inset="true"></ul>
    </div>
</div>

</body>

我测试了静态ID并且它可以正常工作

$.getJSON('http://localhost/aplikasi/assets/www/include/list.php?id=1'

我的函数carisekolah（id）与获取参数id完全失败，我怎样才能以正确的方式得到参数id？

Answer 1

很难理解你的问题。但听起来你想做这样的事情：

$("li").on("click", function(event){ 
    var id = $(this).attr("id");
    carisekolah(id);
});

Answer 2

看起来就像是在DOM准备好绑定列表的<li>，但是在HTML标记中，您的列表没有子节点。如果动态添加这些，则应使用事件委派。试一试：

$(document).on('click', '#listsekolah li', function() {
    carisekolah(this.id);
});

如果ID实际上来自data-katid属性，请按以下方式调用函数：

carisekolah($(this).data("katid"));

如何使用事件Onclick </li>将<li>的id绑定

2 个答案: