Jquery Json not working properly

Question

I have the following which works fine:

      $('<li><a id=' + loc.locId + ' href="/DataEntry"  rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");

       $("#btnList a").click(function () {
            alert(siteName);
            localStorage["dataEId"] = $(this).attr("id");
            localStorage["dataESiteName"] = siteName;
            localStorage["dataESysName"] = sysName;
            localStorage["dataELocName"] = $(this).text();

         }

When I have the following, I can't even get to the click to display an alert message:

$.getJSON('/Home/GetLocType', { "locId": loc.locId }, function (result) {
    var str = JSON.stringify(result);

    if (str == '1') {
        $('<li><a id=' + loc.locId + ' href="/DataEntry"  rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
    } else {
        $('<li><a id=' + loc.locId + ' href="/DataEntry/PotableForm"  rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
    }
    $("#btnList").listview('refresh');
});

$("#btnList a").click(function () {
    alert(siteName);
    localStorage["dataEId"] = $(this).attr("id");
    localStorage["dataESiteName"] = siteName;
    localStorage["dataESysName"] = sysName;
    localStorage["dataELocName"] = $(this).text();
}

Note sure what the difference is. I need to use Json as based on value, I need to go to a either of the 2 hyperlinks.

PSL · Accepted Answer · 2013-09-16 19:01:07Z

2

Use event delegation since anchor is created dynamically in your ajax call or bind the event (only for the added element) inside the ajax success callback. on syntax will work if your jquery version >= 1.7 for earlier versions take a look at live

  $("#btnList").on('click', 'a', function () {
        alert(siteName);
        localStorage["dataEId"] = $(this).attr("id");
        localStorage["dataESiteName"] = siteName;
        localStorage["dataESysName"] = sysName;
        localStorage["dataELocName"] = $(this).text();

    }

Your first syntax works because it binds the click event to the anchor that exists underneath btnList, but it doesn't bind event to the ones added during the ajax calls in a later point in time.

edited Sep 16, 2013 at 19:01

answered Sep 16, 2013 at 18:55

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery Json not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related