Question

我最近一直在研究一个项目，并且需要学习jQuery来完成它。对初学者来说，学习起来并不是一件容易的事。无论如何，我一直试图让一些div标签在两者之间切换，具体取决于用户点击了哪一个。

第一个“添加字段”应该切换到包含添加新字段的按钮的div。现在我没有在这里放入大量代码，而是将其放入http://jsfiddle.net/9acEk/8/，这样你就可以看到一个有效的例子，或者说不能正常工作。我的问题是，当我更改选项卡并单击“添加字段”选项卡时，按钮不再起作用。页面打开时会显示一个按钮，单击该按钮会添加一个文本框。然而，即使我只是点击“添加字段”选项卡按钮不再执行任何操作，我也使用了警告框来显示代码，它完全相同。我不知道为什么在单击选项卡后这不起作用，对我来说没有任何意义，因为所提到的代码完全相同。

道歉，如果这个问题没有意义，任何问题只会问我，我会尽力清理它。非常感谢您提供的任何帮助，非常感谢。

编辑：似乎jsfiddle不起作用（对不起，这也很新）所以我将把代码放在这里。

    <html>
<body>
    <table width ="100%" alight="right">
        <td width ="51.5%"></td>
        <td> <div id="addField" class="tabOptions">Add field</div></td>
        <td><div id="fieldProperties" class="tabOptions">Field Properties</div></td>
        <td> <div id="formProperties" class="tabOptions">Form Properties</div></td>
    </table>
    <hr>

    <table align ="left"style="background-color: white" width="100%">
        <tr>
        <tr>
        <div id="formName" class="formDetails">
                <h2>Untitled</h2>
                <h4>This is your form description</h4>
        </div>
    </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 = 1;
var textAreaCounter = 1;
var textBoxCounter = 1;
var tempStorage = $('div#placeholder').html();



$(document).ready(function() {

    $(".formDetails").live('click','div',function(){
        var divID = this.id;
        alert(divID);
        alert(document.getElementById(divID).innerHTML);
    });

    $(".container").live('click','div',function(){

        var divID = this.id;
        if(divID != ""){
            alert(divID);
            var content = document.getElementById(divID).outerHTML;
            // alert(content);
            var text = document.getElementById(divID).innerHTML;
            alert(text);

            var textboxId = $('div.container')
            .find('input[type="text"]')[0]
            .id;
            $('div#placeholder').html(content);
        }
        else{

        }

    });

    $("#addField").live('click','div',function(){
        $('div#placeholder').html(tempStorage);
    });
    $("#fieldProperties").live('click','div',function(){
        var content = "<p>Content of fields should be here</p>";
        $('div#placeholder').html(content);
    });
    $("#formProperties").live('click','div',function(){
        var content = "<p>Content of form should be here</p>";
        $('div#placeholder').html(content);
    });
    $('#textAdd').click(function() {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container " + textBoxCounter +      "' class='container'><li><input type='text' value='TEXT' id='textBox " + textBoxCounter +"' name='textBox " + textBoxCounter +"')'></li></div></br>";
        document.getElementById("identifier").appendChild(newdiv);
        textBoxCounter++
        counter++;
    });
});

Answer 1

更改

$('#textAdd').click(function()

到

$('#textAdd').live('click',function() {

并且工作正常.. working example here

有几件事......

您使用的是非常旧版本的jQuery - 1.4.4。我建议如果您要学习新内容，请学习最新版本....在最新版本中，live()函数已被on()替换 - 所以您的代码将如下所示：< / p>

$(document).on('click','#textAdd',function() {

其中document是页面加载时出现的任何父元素

Working example here

在div标签之间切换会破坏我的代码

1 个答案: