0

ボタンを押すと、画面の左側にテキストボックスが作成され、divで囲まれるシステムがあります。新しいテキストボックスには、textbox1,2などの名前が付けられます。ユーザーが周囲のdivをクリックすると、画面右側のボタンがテキストボックスに置き換わり、ユーザーは新しく生成されたテキストボックスに入力できるようになります。画面の左側にもテキストボックスが表示されます。これを実行したい理由は、ユーザーがdivをクリックして右側のボックスを編集しない限り、左側のテキストボックスは編集できないためです。どうすればいいのかわからないようです。

これは厳しく編集されたバージョンであるため、タグの欠落などの間違いはご容赦ください。また、以下のコードを見る前に、私が設定したデモを見たいと思うかもしれません。http://jsfiddle.net/JHmaV/335/。

これがHTMLコードです

    <html>
<body>
    <table width ="100%" alight="right">
        <td width ="51.5%"></td>
        <td> <div id="addField" class="tabOptions">Add field</div></td>
    </table>

    <table align ="left"style="background-color: white" width="100%">


    </tr>
    <td width ="50%">
        <ul id ="firstColumn">
            <div id="identifier">
            </div>
        </ul>
    </td>
    <td>
        <ul id ="secondColumn" width="5%">
            <div id="placeholder">
                <div id="mainPanel">
                    <li><input type="button" class="formCreationButton" id="textAdd" value="Single line text" /></li>

                </div>
            </div>
        </ul>
    </td>
    <tr>
</table>

そしてここにjQueryがあります

      var counter = 0;
var textBoxCounter = 1;
var tempStorage = $('div#placeholder').html();



function setValue(target) {

    $("textBox1").replaceWith("<h2><input type='text' onkeydown='setValue(this)' value='"+ target.value +"' id='" + target.id +"' name='" + target.id +"')'></h2>");

    target.value = target.value;
}
function changeHeader(target) {

    if(target.id == "formNameChange"){
        $('h2').replaceWith('<h2>' +target.value + '</h2>');
    }
    else{
        $('h4').replaceWith('<h4>' +target.value + '</h4>');
    }
}

$(document).ready(function() {

     $("#addField").live('click','div',function(){            
        $('div#placeholder').html(tempStorage);
    });

    $('#textBox1').live('keyup',function() {

        alert("TESTING");
    });
    $('#textBox1').live('keypress',function ()
    {
        $('textBox1').val('Changed Value');
        alert('test');
    });
    $('#textBox1').live('onFocus',function ()
    {

        alert('test');
    });
    $(".container").live('click','div',function(){

        var divID = this.id;
        if(divID != ""){
            var lastChar = divID.substr(divID.length - 1);
            var content = document.getElementById(divID).outerHTML;
            var text = document.getElementById(divID).innerHTML;
            var textboxId = $('div.container')
            .find('input[type="text"]')[lastChar]
            .id;
            $('div#placeholder').html(content);
                                alert(textboxId);
        }
        else{

        }
    });

    $('#textAdd').live('click',function() {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container " + counter + "' class='container'><li><input type='text' onkeydown='setValue(this)'  id='textBox " + textBoxCounter +"' name='textBox " + textBoxCounter +"')'></li></div></br>";
        document.getElementById("identifier").appendChild(newdiv);
        textBoxCounter++
        counter++;
    });
});​

私はjQuery1.4.4を使用していることに注意してください。私はこれを何度か試みましたが、正しく行うことができません。どんな助けでも大歓迎です、よろしくお願いします。ポール。

4

1 に答える 1

1

あなたが投稿したものには多くの問題があります。あなたがすべてを修正するのに十分なことをしているのかわかりませんが、おそらくあなたの問題の少なくともいくつか（すべてではないにしても）を引き起こしていることがわかりました：

  1. 要素IDにスペースを含めることはできません。これは有効なHTMLではありません。
  2. 最終的に、同じIDを持つ2つの入力が作成されます（1つは左側にあり、もう1つは左側のテキストボックス内をクリックすると右側に表示されます）。これにより、$（'＃myId'）。liveで設定したイベントも、この新しく作成されたテキストボックスにバインドされます。
  3. 同じIDを持つ要素の場合（上記で述べたように）。これは有効なHTMLではありません。

編集：

これがあなたが探していることをするjsFiddleです（私は思う！ハァッ）。コードを少し変更して機能させましたが、かなり自明のはずです。テキストボックスにフォーカスを合わせると、新しいテキストボックスを作成し、元のテキストボックスにリンクするいくつかのデータ属性を設定してから、テキストボックスのライブイベントリスナーを設定します。キーアップが発生すると、入力しているテキストボックスに関連するテキストボックスを見つけて、その値を更新します。

わかる？

コードがやや面倒なので、これは最もクリーンなソリューションではないことに注意してください（クリーンアップされる可能性があります）。ただし、これにより、機能するパスを開始できます。リファクタリングはあなたに任せます:)

http://jsfiddle.net/JHmaV/338/

于 2012-07-16T16:17:23.163 に答える