使用JavaScript生成時，HTML代碼無法正常工作

Question

我試圖使用JQuery來實現IN Place Editing功能。 下面是代碼
editinplace.js

$(document).ready(function() { 
    //When div.edit me is clicked, run this function 
    $("div.editme").click(function() { 
     //This if statement checks to see if there are 
     //and children of div.editme are input boxes. If so, 
     //we don't want to do anything and allow the user 
     //to continue typing 
     if ($(this).children('input').length == 0) { 

      //Create the HTML to insert into the div. Escape any " characters 
      var inputbox = "<input type='text' class='inputbox' value=\""+$(this).text()+"\">"; 

      //Insert the HTML into the div 
      $(this).html(inputbox); 

      //Immediately give the input box focus. The user 
      //will be expecting to immediately type in the input box, 
      //and we need to give them that ability 
      $("input.inputbox").focus(); 

      //Once the input box loses focus, we need to replace the 
      //input box with the current text inside of it. 
      $("input.inputbox").blur(function() { 
       var value = $(this).val(); 
       $(".editme").text(value); 
      }); 
     } 
    }); 



}); 

ButtonClickFunction.js

function ADDRADIOBUTTON(){ 

    //Creating the div Tag 
    var answer_div = document.createElement("div"); 
    answer_div.setAttribute("class", "answer"); 
    answer_div.id = "answer_div_"+counter; 

    // Creating the Radio button tag 
    var answer_tag = document.createElement("input"); 
      answer_tag.setAttribute("type", "radio"); 
      answer_tag.id = "answer_tag_"+counter; 
      answer_tag.setAttribute("name", answer_div.id); 

       // Creating the Label Tag 
    var radio_label_tag = document.createElement("label"); 
    radio_label_tag.setAttribute("for", answer_tag.id); 

       //Creating the label   
    var In_Place_Edit_div = document.createElement("div"); 
     In_Place_Edit_div.setAttribute("class", "editme"); 
     var In_Place_Edit = document.createTextNode("label"); 
    In_Place_Edit_div.appendChild(In_Place_Edit); 

     radio_label_tag.appendChild(In_Place_Edit_div); 

      // Adding Radio button dot on the div and screen actually  
      answer_div.appendChild(answer_tag); 

      //Adding the Label here on the right of radio button. 
      answer_div.appendChild(radio_label_tag); 


    // Adding Answer div to the main div   
    var element=document.getElementById("divid_"+counter); 
    element.appendChild(answer_div); 


} 

和index.php文件包括這兩個JS文件與jQuery的1.8.2.min.js

<script language="javascript" src="js/jquery-1.8.2.min.js"></script> 
<script language="javascript" src="js/editinplace.js"></script> 
<script type="text/javascript" src="js/ButtonClickFunction.js"></script> 

沿

我想要做的是創建一個帶有標籤的單選按鈕，當我們點擊它時，標籤可以被編輯。現在，這裏的問題是，當我在index.html頁面

<div class="editme">Please click me!!</div> 

直接使用它的代碼工作正常，但是當我試圖動態生成的代碼的同一行中ButtonClickFuction.js文件它不工作我所示。可能是什麼問題？

Answer 1

crerating HTML元素的動態，你必須綁定點擊功能後，一旦more.Otherwise它不會work.Just調用動態創建 < DIV CLASS =「edttime」>請點擊我！後點擊功能，否則單擊不會爲類edttime新創建的div工作。

$("div.editme").click(function() { 
    //This if statement checks to see if there are 
    //and children of div.editme are input boxes. If so, 
    //we don't want to do anything and allow the user 
    //to continue typing 
    if ($(this).children('input').length == 0) { 

     //Create the HTML to insert into the div. Escape any " characters 
     var inputbox = "<input type='text' class='inputbox' value=\""+$(this).text()+"\">"; 

     //Insert the HTML into the div 
     $(this).html(inputbox); 

     //Immediately give the input box focus. The user 
     //will be expecting to immediately type in the input box, 
     //and we need to give them that ability 
     $("input.inputbox").focus(); 

     //Once the input box loses focus, we need to replace the 
     //input box with the current text inside of it. 
     $("input.inputbox").blur(function() { 
      var value = $(this).val(); 
      $(".editme").text(value); 
     }); 
    }