php - JavaScript does not fire after appending -


this question has answer here:

i'm trying create form allows user edit input through new window. php process input append new input new values. apparently, when try edit appended input, javascript won't fire. please enlighten me on did wrong. html code:

<html>   <head>     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>     <script>       $(document).ready(function(){         $('.races').click(function(e){           console.log("inside testing");           e.preventdefault();           var currid = this.id;           var content = '<form id="theform" action="ct.php" method="post"> race: <input type="text" id="race" name="race"><button type="submit" onclick="okclicked()">click this!</button></form>';                         childwin = window.open('', "_blank", "height=400, width=550, status=yes, toolbar=no, menubar=no, location=no,addressbar=no");           tobeadded = $(this).closest('div');           childwin.document.close();           childwin.document.write(content);           popuprace = childwin.document.getelementbyid("race");           parentrace = document.getelementbyid(currid);           transfervalues();         })       });       function transfervalues()       {           popuprace.value = parentrace.value;       }       function setvalue(text)       {         childwin.close();         tobeadded.parent().append(text);         tobeadded.remove();       }     </script>    </head>   <body>     <div>       name: <input type="text" name="name">     </div>       <div>       <div>         <input type="hidden" name="race-0" value="human" id="race-0">         <span>race: human</span>         <a href="javascript:void(0)" class="races" id="race-0">edit</a>       </div>     </div>     <div>       name: <input type="text" name="name">     </div>     <div>         <div>         <input type="hidden" name="race-1" value="god" id="race-1">         <span>race: god</span>         <a href="javascript:void(0)" class="races" id="race-1">edit</a>       </div>      </div>            </body>  </html> 

and php code:

<?php     $postdatakey = array_keys($_post);     $text = "";     foreach ( $postdatakey $currpostkey )      {         $currvalue = $_post[$currpostkey];         $text .= '<div><input type="hidden" name="'.$currpostkey.'-1" value="'.$currvalue.'" id="'.$currpostkey.'-1"><span>'.$currpostkey.': '.$currvalue.'</span> <a href="javascript:void(0)" class="races" id="race-1">edit</a></div>';     }     echo      '     <html>       <head>         <script>           window.opener.setvalue(\''.$text.'\');         </script>         </head>     </html>     '     ;    ?> 

jquery aware of elements in page @ time runs, new elements added dom unrecognized jquery. combat use event delegation, bubbling events newly added items point in dom there when jquery ran on page load. many people use document place catch bubbled event, isn't necessary go high dom tree. ideally you should delegate nearest parent exists @ time of page load.

you want change event handlers use on() method.


Comments

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

jquery - Clone last and append item to closest class -

c - Unrecognised emulation mode: elf_i386 on MinGW32 -