Html Code not working properly while generated with JavaScript

Question

I am trying to impliment the IN Place Editing functionality using JQuery. Here is the code
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);


}

and the index.php file includes these two JS files along with 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>

What I am trying to do is create a radio button with label besides it and the label can be edited when we click on it. Now the problem here is that when I use the Code

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

directly in the index.html page it works fine but when I try to generate the same line of code dynamically as I shown in ButtonClickFuction.js file it Does not work. What might be the problem ?

G . R · Accepted Answer · 2012-11-06 07:31:24Z

3

After crerating the HTML element dynamically you must bind the click function once more.Otherwise it wont work.Just call the click function after dynamic creation of the < div class="edttime">Please click me!!.Otherwise click wont work for the newly created div with class edttime.

 $("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);
        });
    }

answered Nov 6, 2012 at 7:31

G . R

5411 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Leonidus Over a year ago

Sorry to bother you but what do you mean by bind the click function once more as I am new to JQuery can you please elaborate ?

G . R Over a year ago

You have written the $("div.editme").click(function() inside document ready function.But you are creating the element after the page has loaded and document ready function is called.So after creating the element dynamically you must define the $("div.editme").click(function()

Leonidus Over a year ago

Thank You very Much that worked. hey can you please tell me where can I find some good tutorials on JQuery ?

Collectives™ on Stack Overflow

Html Code not working properly while generated with JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related