0

感觉就像我经常来这里问问题一样，但我又一次被困住了。我正在尝试选择一个 textarea 并允许自己在另一个 textarea 中编辑文本，它使用文本框可以正常工作，但不能使用 textarea。每次单击 div 容器时，在查找 textarea 时都会得到未定义的结果。下面是代码。

jQuery

     $(".textAreaContainer").live('click','div', function(){
        var divID = this.id;
        if ( divID !== "" ){

            var lastChar = divID.substr(divID.length - 1);
            var t = $('#' + divID ).find(':input');
            alert(t.attr('id'));

            t = t.clone(false);               
            t.attr('data-related-field-id', t.attr('id'));              
            t.attr('id', t.attr('id') + '_Add');
            t.attr('data-add-field', 'true');

            var text = document.getElementById(divID).innerHTML;
            //var textboxId = $('div.textAreaContainer').find('input[type="textArea"]')[lastChar].id;
            $('div#placeholder input[type="button"]').hide();
            var text = "<p>Please fill out what " + t.attr('id') +" Textarea shall contain</p>";

            if ( $('#' + t.attr('id')).length == 0 ) {
                $('div#placeholder').html(t);
                $('div#placeholder').prepend(text);
            }
        }
        else{

        }
    });

t.attr('id') 应该返回 textbox1（或类似的），但只是返回未定义。

我已经尝试了 .find(':textarea'),.find('textarea'),.find(text,textArea),.find(':input') 以及我通过谷歌找到的很多其他人，但所有他们返回未定义，我不知道为什么。可以在此处找到演示，http://jsfiddle.net/xYwaw/。在此先感谢您的任何帮助，不胜感激。

编辑：下面是我正在使用的一个非常相似的示例的代码。这就是我想做的，但使用文本框而不是文本区域。

     $('#textAdd').live('click',function() {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container" + counter + "' class='container'><li><input type='text' id='textBox" + textBoxCounter +"' name='textBox" + textBoxCounter + "'></li></div></br>";
        document.getElementById("identifier").appendChild(newdiv);
        textBoxCounter++
        counter++;
    });
    $(".container").live('click','div', function(){
        var divID = this.id;
        if ( divID !== "" ){
            var lastChar = divID.substr(divID.length - 1);
            var t = $('#' + divID).find('input');
            alert(divID);


            t = t.clone(false);
            t.attr('data-related-field-id', t.attr('id'));
            alert(t.attr('id'));
            t.attr('id', t.attr('id') + '_Add');               
            t.attr('data-add-field', 'true');


            var text = document.getElementById(divID).innerHTML;
            // var textboxId = $('div.container').find('input[type="text"]')[lastChar].id;
            $('div#placeholder input[type="button"]').hide();
            var text = "<p>Please fill out what " + t.attr('id') +" textbox shall contain</p>";

            if ( $('#' + t.attr('id')).length == 0 ) {
                $('div#placeholder').html(t);
                $('div#placeholder').prepend(text);
            }
        }
        else{

        }
    });
4

1 回答 1

1

首先从第一行删除第二个参数“div”：

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

...实现它：

$(".textAreaContainer").live('click', function(){

然后改变：

var t = $('#' + divID ).find(':input');

...到：

var t = $(this).find(':input');

因为您已经知道这this是容器，所以无需再次通过 id 选择它。此外，您分配给 textarea 容器的 id 属性中有一个空格，这是无效的，并导致您的原始代码尝试选择'#textAreaContainer 0'实际用于查找0标记的元素，该标记是#textAreaContainer. 因此，修复创建元素以删除 id 中的空间的代码通常是一个好主意，也是解决此问题的另一种方法。

于 2012-07-17T14:36:46.213 回答