0

这可能是一个小问题，但我无法弄清楚，所以请帮助我。在下面的代码中，我有一个 textarea 和一个按钮。按钮 div 最初设置为 display:none。单击 textarea 时，它会放大并显示按钮的 div。有一个名为 DUPLICATE 的链接，单击时会将一组类似的 textarea 和按钮附加到主 div。现在的问题是当有多个 textarea 时，jquery click 函数仅适用于原始 textarea，而不适用于其他 textarea。此外，该功能的效果会反映在所有 textareas 中，即所有 textareas 都被放大并显示按钮。我只想放大单击的特定文本区域并显示相应的按钮。分配动态 id'

    <script type="text/javascript">
        $(document).ready(function(){
            test={
                btn:function(){
                    $(this).css("height","100px");
                    $(this).parent().siblings(".btn").css("display","block");
                    },
                duplicate:function(e){
                    e.preventDefault();
                    $(".main").append('<div class="child"><textarea name="text" class="text" id="text"></textarea></div><div class="btn"><input type="button" value="Button" /></div>');
                    }

            }
            $("#text").click(test.btn);
            $("#duplicate").click(test.duplicate);
        });
    </script>
    <style type="text/css">
    .btn
    {
        display:none;
    }
    </style>
</head>
<body>
<div class="main">
    <a href="#" id="duplicate">DUPLICATE</a>
    <div class="child">
        <textarea name="text" class="text" id="text"></textarea>
    </div>
    <div class="btn">
        <input type="button" value="Button" />
    </div>
</div>
</body>
</html>
4

2 回答 2

1

试试这个，只是改变

$("#text").click(test.btn);

至

$('.main').on('click', '.text', test.btn);

并更改btn功能

btn:function(){
    $(this).css("height","100px");
    $(this).parent().next(".btn").css("display","block"); // this line only
}

还要记住id在页面上应该是唯一的。

工作示例。

于 2012-09-09T07:06:44.727 回答
0

工作演示 http://jsfiddle.net/Y4a7n/

有几点需要注意：

  • id对于您可以查看克隆的所有元素，应该是唯一的，但您可以class在这种情况下使用。

  • 请使用.onAPI - http://api.jquery.com/on/ it - 将一个或多个事件的事件处理函数附加到所选元素。

  • 如果您只想定位下一个按钮以在点击时显示，而不是siblings尝试使用Api。next

希望它适合你的事业:)

代码

$(document).ready(function() {
    test = {
        btn: function() {

        },
        duplicate: function(e) {
            $(".main").append('<div class="child"><textarea name="text" class="text" ></textarea></div><div class="btn"><input type="button" value="Button" /></div>');
        }

    }

    $("#duplicate").click(test.duplicate);
});

$(document).on('click', '.text', function() {
    $(this).css("height", "100px");
    $(this).parent().next(".btn").css("display", "block");
});​
于 2012-09-09T07:04:34.620 回答