Question

这可能是一个小问题，但我无法弄清楚，所以请帮助我。在下面的代码中，我有一个textarea和一个按钮。 button div设置为最初显示：none。当单击textarea时，它会放大并显示按钮的div。有一个名为DUPLICATE的链接，在点击时会向主div添加一组类似的textarea和按钮。现在问题是问题是当存在多个textareas时，jquery点击功能仅适用于原始textarea，而不适用于其他textarea。此外，函数的效果反映在所有textareas中，即所有textareas都被放大并且按钮被显示。我只想要点击的特定文本区域被放大并显示相应的按钮。分配动态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/ - 将一个或多个事件的事件处理函数附加到所选元素。
如果您只希望定位下一个按钮以便在点击时显示，而不是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");
});

Jquery单击类似元素中的特定元素

2 个答案: