Today, I tried to solve a problem: When I click the header of a table, then the table will add a new row, and if I click the added row, the row will alert its row number.
This is very easy problem, but I just express the idea about how to solve a problem that is similar, and the progress.
First step, I finish the addition of a new row functions easily, see the code below:
$(document).ready(function(){
$("#tb1 tr").click(function(){
$("#tb1").append("<tr><td>you click me</td></tr>");
})
$("#tb1 td").each(function(i){
$(this).click(function(){
alert(i);
});
});
});
But the click event does not work. And the reason is clear: when the page finish loading, there is any TB element in the table. So I consider I should add the click event when I create the new row! See the changed code below:
$(document).ready(function(){
$("#tb1 tr").eq(0).click(function(){
$("#tb1").append("<tr><td>you click me</td></tr>");
$("#tb1 td").each(function(i){
$(this).click(function(){
alert($(this).parent().index());
});
});
});
});
Now the click event will be triggered, but when I click the first added row, the same message will be shown several times! So I realized that I made a mistake: when I created a new row, I added a click event for every TB element every time. So I change the script:
$(document).ready(function(){
$("#tb1 tr").eq(0).click(function(){
$("#tb1").append("<tr><td>you click me</td></tr>");
$("#tb1 td").filter(":last").click(function(){
alert($(this).parent().index());
});
})
});
OK, the script works correctly now!
At last, I make a summary about how to solve this kind problem:
1 add new element normally;
2 add the trigger event when you create the new element;
3 just add the trigger event for the element what you created just now.
This is my idea to solve this kind of problem, if you have a better idea, please share it with us. Thank you very much.
分享到:
相关推荐
Polya is one of the most frequently quoted mathematicians, and the following statements from "How to Solve It" make clear why: "My method to overcome a difficulty is to go around it." "Geometry is ...
How to Solve It:A New Aspect of Mathematical Method
How to solve it Modern Huristics 2nd edition
How to solve it 清晰英文版
101 Project Management Problems and How to Solve Them
《如何解题,现代启发法》的英文版,DJVU 格式,可搜索。
How To Solve Physics Problems How To Solve Physics Problems How To Solve Physics Problems
Solve big problem and test new ideas in just 5 days
This is a physics dubject,it teaches you how to solve the problems in physics
NULL 博文链接:https://samueli.iteye.com/blog/287194
偏微分方程的Matlab解法,方便你使用MATLAB来解决偏微分问题!-Solution of Partial Differential Equations Matlab for you to use MATLAB to solve the partial differential problem!
作者: G. Polya 副标题: A New Aspect of Mathematical Method (Princeton Science Library) ISBN: 9780691119663 页数: 288 定价: USD 16.95 出版社: Princeton University Press 装帧: Paperback ...
how to solve it 怎样解题.
Using flow charts and line-by-line analysis of a full-scale P2P file-sharing application, they show you how to solve for typical P2P programming challenges – and create your own sate-of-the-art P2P ...
[方法论]Polya How to Solve It 2004 英文版
grDecOrd - solve the problem about decomposition of the digraph to the sections with mutually accessed vertexes (strongly connected components); grDistances - find the distances between any vertexes ...
how to solve it-some basic steps
You'll learn how to solve the problem of establishing SEO programs from the development perspective. Companies often turn to expensive tools and leisurely consultants for building SEO programs. With ...
How to solve 90% of NLP problems_ a step-by-step guide