Tap event on a ui-block is not firing - JQuery Mobile - jquery-ui

Question

I have a piece of code:
On HTML body:
<div data-role="content">
<section class="ui-grid-c">
<div class="ui-block-a">Column 1</div>
<div class="ui-block-b">Column 2</div>
<div class="ui-block-c">Column 3</div>
<div class="ui-block-d">Column 4</div>
<div class="ui-block-a">Column 1</div>
<div class="ui-block-b">Column 2</div>
<div class="ui-block-c">Column 3</div>
<div class="ui-block-d">Column 4</div>
<div class="ui-block-a">Column 1</div>
<div class="ui-block-b">Column 2</div>
<div class="ui-block-c">Column 3</div>
<div class="ui-block-d">Column 4</div>
<div class="ui-block-a">Column 1</div>
<div class="ui-block-b">Column 2</div>
<div class="ui-block-c">Column 3</div>
<div class="ui-block-d">Column 4</div>
</section>
<button id="show">Show</button>
</div>
and on JQM side:
var word = "";
$(document).on('tap', 'ui-block-a', function(e){
word = word + $(this).text();
});
$(document).on('click', '#show', function(e){
alert(word);
word = "";
});
This part:
$(document).on('tap', 'ui-block-a', function(e)
is not firing as expected.If I replace word = word + $(this).text(); with alert($(this).text()); no alert window is showing up.
Another question is if I want write a tap event handler on 'ui-block-b' a seperate event handler must be written to handle this event? I want to call the same function $(document).on('tap', 'ui-block-a', function(e) when a tap event occurs in any of ui-blocks.

Answer 1

It seems like an typo. In $(document).on('tap', 'ui-block-a', function(e){, it should be .ui-block-a instead of ui-block-a.
For the second question. I have two suggestions.
First is to use a common class for all these <div> and bind this event to this common class.
For example, add a class named word-add to all the <div>.
<div class="ui-block-a word-add">Column 1</div>
and then bind the tap event on word-add
$(document).on('tap', 'word-add', function(e){...})
The second is to define a function first and bind this function to tap event.
function addWord(e){
word = word + $(this).text();
}
$(document).on('tap', 'ui-block-a', addWord);
$(document).on('tap', 'ui-block-b', addWord);