Question

I’m trying to build a mobile app with jQuery mobile. Currently my problem is the following:
In my html is a list (dynamicly loaded, I don’t know how much list-items are included, so let’s take 3 for this example. The value of tupelID is unknown as well):

<ul id="bibliothek" data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme='c'><a class='bibentry' href='#page1' data-transition='slide' tupelID='1'> Item 1</a></li>
<li data-theme='c'><a class='bibentry' href='#page1' data-transition='slide' tupelID='2'> Item 2</a></li>
<li data-theme='c'><a class='bibentry' href='#page1' data-transition='slide' tupelID='3'> Item 3</a></li>
</ul>

If the users clicks on one of those list-items, a new page loads (#page1). On this page I want to inject some data based on the parameter (tupelID) from the a-tag. I thought the easiest way would be to grep all links from the list (jQuery(‘a.binetry’)) and add an eventlistener to each one:

jQuery('a.bibentry').addEventListener("click",function(this)
{
    alert "TupelID =" + this.tupelID
    // first test with a simple alert:
    // If users clicks on Item 1 the alert should be "1" (value of tupelID),
    // if users clicks on Item 2 the alert should be "2" (value of tupelID) and so on..
});

Unfortunately this does not work and I couldn’d find a solution for my problem in the web.
Can someone help, please?

Answer 1

$('#bibliothek').on('a.bibentry', 'click', function(){
  alert("TupelID =" + $(this).attr('tupelID'));
});