Question

我有一个系统，当按下按钮时，会在屏幕左侧创建一个文本框，并以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++;
    });
});

请注意我使用的是jQuery 1.4.4。我在这方面做了几次尝试，但无法正确完成。任何帮助将不胜感激，谢谢你提前。保罗。

Answer 1

您发布的内容存在很多问题。我不明白你做得多好以解决所有问题，但是我发现这可能至少导致一些（如果不是全部）问题：

您不能在元素ID中包含空格。这不是有效的HTML。
您最终得到两个具有相同ID的输入（左侧的那个，然后当您在左侧文本框内单击时右侧显示的一个）。这将导致您通过$（'＃myId'）。live设置的任何事件也绑定到这个新创建的文本框。
如果你的元素具有相同的id（如上所述）。这不是有效的HTML。

编辑：

这是一个jsFiddle，可以满足您的需求（我想！哈哈）。我稍微修改了你的代码以使其工作，但它应该是非常自我解释的。当您聚焦文本框时，我创建一个新文本框，设置一些链接回原始文本框的数据属性，然后为文本框设置实时事件监听器。当一个密钥发生时，我找出与你输入的密钥相关的文本框并更新它的值。

有意义吗？

应该注意的是，这不是最干净的解决方案，因为代码有点混乱（可以清理）。但是，这应该让您开始有效的路径。我会把重构留给你：）

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

在Div中更改动态生成的文本框的内容

1 个答案: