Why does jquery Add the HTML element button does not perform a class-style binding for the Click event

<span id="Label3"></p><p><p>Code example:</p></p><p><p>More Buttons:</p></p><p><p><input type= "button" class= "addmore" id= "addmore${issue.id}" value= "more"/></p></p><p><p><span style="color: #ff0000;">Click the button to add a line of text boxes and the "submit" button:</span>(no problem, can be added normally)</p></p><p><p>$ (". addmore"). Click (function () {</p></p><p><p>var index = this.id.substring (7,this.id.length);</p></p><p><p>$ ("#tr" +index). clone (). appendTo ("#table" +index);</p></p><p><p>$ ("#table" +index). Append ("<tr><td></td>" +</p></p><p><p>"<td><input id= ' content '" +num + "type=text size=60/></td>" +</p></p><p><p>"<td><input id= ' date '" +num + "type=text/></td>" +</p></p><p><p>"<td><input id= ' result '" +num+ "type=text/></td>" +</p></p><p><p>"<td><input Type=button class= ' submitbtn ' id= ' addbtn '" +index + "value= ' Submit '/></tr> ');</p></p><p><p>});</p></p><p><p>Click events for all "submit" buttons:</p></p><p><p>$ (". submitbtn"). Click (function () {<span style="color: #ff0000;">////initialize The Click event of the jquery element added</span></p></p><p><p>The number of the issue is also the index of text</p></p><p><p>var index = this.id.substring (6,this.id.length);</p></p><p><p>Alert ("index=" +index);</p></p><p><p>var content = $ ("#content" +index). val ();</p></p><p><p>var date = $ ("#date" +index). val ();</p></p><p><p>var result = $ ("#result" +index). val ();</p></p><p><p>Determine if there is a null value</p></p><p><p>If (content.length! = 0 && date.length! = 0 && result.length! = 0) {</p></p><p><p>$.ajax ({</p></p><p><p>Url: "addissueinfo",</p></p><p><p>Type: "post",</p></p><p><p>Data: {issuecontent:content,</p></p><p><p>issueid:index,</p></p><p><p>issuedate:date,</p></p><p><p>issueresult:result},</p></p><p><p>Datatype: "json",</p></p><p><p>Success:function () {</p></p><p><p>Alert ("add success! ");</p></p><p><p>$TR = $ ("#addBtn" +index). parent ("td"). Parent ("tr");</p></p><p><p>$tr. Remove ();</p></p><p><p>Append row</p></p><p><p>$ ("#table" +index). Append ("<tr><td></td><td>" +content+ "</td><td>" +date+ " </td><td> "+result+" </td><td></td></tr> ");</p></p><p><p>},error:function () {</p></p><p><p>Alert ("server busy, Please wait and try Again!") ");</p></p><p><p>}</p></p><p><p>});</p></p><p><p>}else{</p></p><p><p>Alert ("sorry, every piece of information in the current line cannot be empty, please complete and Submit!") ");</p></p><p><p>}</p></p><p><p>});</p></p><p><p><span style="color: #ff0000;">The question is, Why click on the "more" triggered event to add the text box and the "submit" button, this button does not perform class= "submitbtn" click event?</span></p></p><p><p></p></p><pre class="best-text mb-10"><span style="font-size: 14px;"><span style="font-size: 14px;"> <span style="color: #ff0000; font-size: 16px;">workaround:</span> the <span style="font-size: 16px;">input and button generated when adding more rows are <span style="color: #ff0000;">generated dynamically, so you cannot use the Click to use Live (the version after jquery 1.7.2 is not recommended for Live) or on </span></span></span></span><br> <br><span style="font-size: 16px;"><span style="font-size: 16px;">put $ (". submitbtn"). click (function () {</span></span><br><span style="font-size: 16px;"><span style="font-size: 16px;">instead</span></span><br><span style="font-size: 16px; color: #ff0000;"><span style="font-size: 16px; color: #ff0000;">$ (". submitbtn"). Live (' Click ', function () {</span></span><br><span style="font-size: 16px;"><span style="font-size: 16px;">or</span></span><br><span style="font-size: 16px;"><span style="font-size: 16px;"> <span style="color: #ff0000;">$ (". submitbtn"). on (' Click ', function () {</span> </span></span><br> <br><span style="font-size: 16px;"><span style="font-size: 16px;">remember that if an element does not exist at the time the page is initialized, but after it is dynamically generated on the page, the elements will be manipulated, such as click, blur, keyup,</span> change ....</span><br> <br><span style="font-size: 16px;"><span style="font-size: 16px;">. On (' click ', function</span></span><br><span style="font-size: 16px;"><span style="font-size: 16px;">. On (' blur ', function</span></span><br><span style="font-size: 16px;"><span style="font-size: 16px;">. On (' keyup ', function</span></span><br><span style="font-size: 16px;"><span style="font-size: 16px;">....</span></span></pre><p><p></p></p><p><p>Why does jquery Add the HTML element button does not perform a class-style binding for the Click event</p></p></span>