单击Jquery以在类似元素中找到特定元素。

Question

这可能是一个小问题，但我无法解决，所以请帮助我。在下面的代码中，我有一个文本区域和一个按钮。按钮div设置为显示:一开始没有显示。当单击textarea时，它会放大，并且显示按钮的div是一个名为.There的链接，单击该链接将类似的textarea和按钮添加到主div。现在的问题是，当有多个文本区域时，jquery单击函数只与原始文本区域一起工作，而不是与其他文本区域一起工作。函数的作用也反映在所有文本区域中，即所有文本区域都被放大，按钮被显示出来。我只希望被点击的特定文本区域被放大，并显示相应的按钮。分配动态id可能会有所帮助，但jquery还有其他方法吗？

    <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>

Answer 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在页面上应该是唯一的。

Working Example。

Answer 2

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

有几件事值得注意：

• 对于所有可以查看克隆的元素，id应该是唯一的，但在本例中可以使用class。
• 请使用.on API - http://api.jquery.com/on/ it -将一个或多个事件的事件处理程序函数附加到选定的元素中。
• 如果您只想将next按钮作为目标显示在单击上，则尝试使用siblings代替next Api。

希望它适合你的事业，:)

码

$(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");
});​