Question

Hi all I have suppose two html files in my mobile application say page1.html and page2.html. In page2.html I have one table and on click of row I had shown an alert. If Suppose I go from page1 to page2.html then on click of table it show alert box one time. If I press back button then It go to page1.html If suppose I go again on page2.html and I click on table row then this time alert display 2 times. IF I go back again on page1 and come again on page2.html then this time on click of row it show alert 3 times and so on…

My page2.html table look like:

<div id="myTable"  align="center"  data-theme="b"></div>
        <script type="text/javascript"> 

var theader = '<table border="1" id=\"tableId\">\n';

                    var colheader = '<tr id="headingtab" bgcolor="#D68B8B"><th>Name</th><th>Address</th><th>City</th><th>LTP</th><th>State</th><th>Country</th><th>Mob No</th></tr>\n';
                    tbody = colheader; 


                    tbody += '<td>';
                        tbody += "QQQQQQQQQQQQQQQQQQQQQ";
                        tbody += '</td>';

                        tbody += '<td>';
                       tbody += "QQQQQQQQQQQQQQQQQQQQQ";
                        tbody += '</td>'

                        tbody += '<td>';
                        tbody += "QQQQQQQQQQQQQQQQQQQQQ";
                        tbody += '</td>'

                        tbody += '<td>';
                       tbody += "QQQQQQQQQQQQQQQQQQQQQ";
                        tbody += '</td>'

                        tbody += '<td>';
                        tbody += "QQQQQQQQQQQQQQQQQQQQQ";
                        tbody += '</td>'

                        tbody += '<td>';
                        tbody += "QQQQQQQQQQQQQQQQQQQQQ";
                        tbody += '</td>'

                        tbody += '<td>';
                        tbody += "QQQQQQQQQQQQQQQQQQQQQ";
                        tbody += '</td>'                             


                        tbody += '</tr>\n';

                        var tfooter = '</table>';
                        document.getElementById('myTable').innerHTML = theader + tbody + tfooter;

                        </script>


 <script type="text/javascript">


            $("#tableId tr td").live("click",function()
            {    
                console.log("??????????????????????????????");

                alert("Row Click");

            });


    </script>
    </div>

I want only one time alert shown on each click. How to do that? Any help will be appreciated. Thanks in advance.

Answer 1

If I use e.stopImmediatePropagation();as :

$("#tableId").die('click', 'tr td').live('click', 'tr td', function (){
            alert ("Click");
            e.stopImmediatePropagation();

            }); 

Then it gives me proper result, but If I use `e.stopPropagation(); then it is not work.

By the way Thank you guys fredrik,Ashirvad Singh,Arjun T Raj for your time and response. Any other suggestion will be appreciated. Thanks.