0

JQueryを使用してインプレース編集機能を実装しようとしています。これがコードです
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ファイルには、jquery-1.8.2.min.jsとともにこれら2つの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要素を動的に作成した後、クリック関数をもう一度バインドする必要があります。それ以外の場合は機能しません。<divclass = "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);
        });
    }
于 2012-11-06T07:31:24.737 に答える