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>

我要做的是创建一个带有标签的单选按钮，当我们点击它时可以编辑标签。现在问题是当我使用代码时

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

直接在index.html页面中工作正常但是当我尝试动态生成与ButtonClickFuction.js文件中显示的相同的代码行时，它不起作用。可能是什么问题？

Answer 1

动态创建HTML元素后，您必须再次绑定click函数。否则它将无法工作。只需在动态创建后调用click函数＆LT; div class =“edttime”＆gt;请点击我!!。否则点击不适用于新创建的div类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);
        });
    }

使用JavaScript生成时，Html代码无法正常工作

1 个答案: