AAaa AAaa - 1 month ago 12
Javascript Question

jQuery mobile - how to connect between <a href> and the click event?

I'm a newbie to jQuery and jQuery mobile.

I followed a few samples and documentations and created the following code:

function initListByUrl(id, requestUrl) {
$.ajax({
url: requestUrl,
type:'GET',
dataType:'json',
success: function(data) {
var items = []
$.each(data, function(i, elem) {
items.push('<li id="cat_li_'+i+'"><a href="#places">' + elem.name + '</a></li>');
});
id.html(items).listview('refresh');
}

});
}


$(document).on("click", '[id^=cat_li]', function(event, ui) {
console.log(3);
})


I need to have the elem event from the $.ajax available in the context of the click event

This is because the elem object holds a field that is relevent when the item is clicked.

How should I do it?

EDIT

just to clarify.

the initListByUrl functions is called in document-ready. It builds a list view by the retrieved json object which contains an array.

if I had elem in the context of the on-click event I would have done something like this:

$(document).on("click", '[id^=cat_li]', function(event, ui) {
call_some_function(elem.someField);
})


My issue is how do I have the appropriate elem object in the scope of the on-click event?

EDIT 2



This is my full code:

var stack = []

var site_url = 'http://localhost:3000';
$(function() {


initCategoriesList();

$("#places").on('pageinit', function() {
var category = stack.pop();
initPlacesList(category);
});

$("#place").on('pageinit', function() {

});


});


function initCategoriesList(id, requestUrl) {
$.ajax({
url: site_url + '/categories',
type:'GET',
dataType:'json',
success: function(data) {
var items = []
$.each(data, function(i, elem) {
items.push('<li id="cat_li_'+i+'"><a href="#places">' + elem.name + '</a></li>');
});
$("#categories_ul").html(items).listview('refresh');
}

});
}

function initPlacesList(category_id) {
$.ajax({
url: site_url + '/business_places/category/' + category_id,
type:'GET',
dataType:'json',
success: function(data) {
var items = []
$.each(data, function(i, elem) {
items.push('<li id="place_li_'+i+'"><a href="#place">' + elem.name + '</a></li>');
$("#places_ul").html(items).listview('refresh');
var element = $("#place_li_" + i)[0];
$.data(element, "object", elem);
});
$("#places_ul").html(items).listview('refresh');

}

});

}

$(document).on("click", '[id^=cat_li]', function(event, ui) {
stack.push(event.target.innerText);
})


$(document).on("click", '[id^=place_li]', function(event, ui) {
var place = $.data(this, "object");
alert(place.name);
})


var place = $.data(this, "object");
ends up having undefined

Answer

Your best bet is going to be to create custom data attributes inside the li element to be accessed at a later time. Push the data you need to these custom attributes. Example:

items.push('<li id="cat_li_'+i+'" data-custom-cool="' + elem.someData + '"><a href="#places">' + elem.name + '</a></li>');

Now, you can pull out the data as you need it with this inside your click handler.

$(this).data("custom-cool"); //this is equiv to elem.someData .

Or, if you have bigger data, you can store the object with the element with $.data:

$.each(data, function(i, elem) {
            items.push('<li id="cat_li_'+i+'"><a href="#places">' + elem.name + '</a></li>');
        });
    id.html(items).listview('refresh');
    var element = $("#cat_li_" + i)[0]; //cant use jQ object
    $.data(element, "object", elem); //assign object
});

Now your click handler should be able to access the object like so (inside handler):

console.log($.data(this, "object").objProperty); //replace objProperty with your property to get.

Demo: http://jsfiddle.net/tymeJV/vx8Xt/1/ Click on "testdiv" and see the console.