CODEWITHSUNDEEP
jqueryclick
user1626183
user1626183

Reputation:

Jquery click for a specific element among similar elements

This may be a small issue , but I am not being able to figure it out , so please help me. In the code below I have a textarea and a button. button div is set to display:none initially. When the textarea is clicked it enlarges and the div of the button gets displayed .There is a link named DUPLICATE , which on click appends a similar set of textarea and button to the main div. Now the problem is problem is when there are multiple textareas , the jquery click functions work only with the original textarea , not with the others . Also the effect of the function get reflected in all the textareas , i.e. all the textareas gets enlarged and the buttons get displayed. I want only the specific textarea that is clicked to be enlarged and corresponding button to be displayed. Assigning dynamic id's may help but is there any other way with 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>

Upvotes: 0

Views: 3398

Answers (2)

The Alpha
The Alpha

Reputation: 146191

Try this, just change

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

to

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

and make changes to btn function

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

Also remember id should be unique on a page.

Working Example.

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

Working demo http://jsfiddle.net/Y4a7n/

Few things to note:

  • id should be unique for all the elements you can look into clone but you can use class in this case.

  • Please use .on API - http://api.jquery.com/on/ it - Attach an event handler function for one or more events to the selected elements.

  • Instead of siblings try using next Api if you only want to target next button to show on click.

Hope it fits your cause :)

Code

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

Upvotes: 0

Related Questions