0

我正在尝试使用 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文件中显示的相同的代码行时，它不起作用。可能是什么问题？

4

1 回答 1

3

动态创建HTML元素后，必须再次绑定click函数。否则将不起作用。只需在动态创建< div class="edttime">请点击我之后调用click函数！否则点击将不起作用新创建的具有类 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);
        });
    }
于 2012-11-06T07:31:24.737 回答