Question

大家好，我想我的移动应用程序中有两个html文件说page1.html和page2.html。在page2.html中，我有一个表，单击行我显示了一个警告。如果假设我从page1转到page2.html然后点击表格，它会显示一次警告框。如果我按下后退按钮然后它转到page1.html如果我想再次在page2.html上点击表格行然后这个时间警报显示2次。如果我在第1页再次返回并再次登录page2.html，那么这次点击行显示警报3次等等...

我的page2.html表格如下：

<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>

我希望每次点击只显示一次警报。怎么做？任何帮助将不胜感激。提前谢谢。

Answer 1

使用jquery函数.one（）

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

                alert("Row Click") 
}

check this

这可能对您有所帮助

Answer 2

试试这个

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

            alert("Row Click");

        });

修改 FIDDLE

Answer 3

由于每次加载page2.html时都绑定了事件处理程序，因此会出现问题。我猜这个页面加载了Ajax？这意味着每次加载页面时都会添加事件处理程序，因为它是Ajax，所以JavaScript事件处理程序仍然存在。事件处理程序存在，直到您将自己删除为完整页面重新加载。

最好的解决方案是只在基页（执行所有ajax加载的页面）中添加一次事件处理程序。

另一个解决方案是首先取消绑定旧的事件处理程序并添加新的事件处理程序。

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

更好的是使用jQuery的委托方法：

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

Answer 4

如果我使用e.stopImmediatePropagation();：

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

            });

然后它给了我正确的结果，但如果我使用`e.stopPropagation（）;那不行。

顺便谢谢你们fredrik,Ashirvad Singh,Arjun T Raj的时间和回应。任何其他建议将不胜感激。感谢。

函数多次调用

4 个答案: