Geek Answers Handbook

Get call function several times

Hello everyone. I assume that two html files in my mobile application say page1.html and page2.html. In page2.html, I have one table, and when I clicked a row, I showed a warning. If we assume that I am switching from page1 to page2.html, then by clicking on the table it displays a warning window once. If I click the back button, go to page1.html. If I go back to page2.html again and I click on the row of the table and then displays a warning 2 times. IF I go back to page1 again and run again on page2.html and then click on the line this time, it will show a warning 3 times and so on ...

The table my page2.html is as follows:

<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 each click to display only one time warning. How to do it? Any help would be appreciated. Thanks in advance.

+4
source share
4 answers

If I use e.stopImmediatePropagation(); as:

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

Then it gives the correct result, but if I use `e.stopPropagation (); then this is not work.

By the way, thanks to the guys fredrik,Ashirvad Singh,Arjun T Raj for your time and answer. Any other suggestion would be greatly appreciated. Thanks.

0
source

Use jquery.one () function

 $(#tableId tr td).one("click",function() { console.log("??????????????????????????????"); alert("Row Click") }

check this

It can help you.

+2
source

Try this instead

  $("#tableId tr td").click(function() { console.log("??????????????????????????????"); alert("Row Click"); });

EDIT FIDDLE

0
source

The problem arises because the event handler is bound every time page2.html is loaded. I would suggest that the page is loaded by Ajax? This means that every time the page loads, an event handler is added, and since it is still present in Ajax JavaScript event handlers. Event handlers are present until you delete them yourself with a full page reload.

The best solution is to only add an event handler once on your base page (the page that does all the ajax loading).

Another solution is to untie the old event handlers first and add new ones.

 $("#tableId tr td").unbind('click').live('click'.....

Better yet, use the jQuery delegation method:

 $("#tableId").die('click', 'tr td').live('click', 'tr td'.....
0
source

More articles:


All Articles