...This has been asked a bunch of times, but I still cannot solve my problem.

I have a list of elements, created dynamically, defined by class 'box', as follows:

<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>
    ....
<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>

I then want the function 'buttonFunction(element)' to look as follows:

function buttonFunction(element){
    $('.element').show()  
}

Where element is the specific inputbox to the specific box div.

...This has been asked a bunch of times, but I still cannot solve my problem.

I have a list of elements, created dynamically, defined by class 'box', as follows:

<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>
    ....
<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>

I then want the function 'buttonFunction(element)' to look as follows:

function buttonFunction(element){
    $('.element').show()  
}

Where element is the specific inputbox to the specific box div.

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 1, 2015 at 16:40 Deduplicator 45.8k77 gold badges7272 silver badges123123 bronze badges asked Jan 23, 2013 at 19:41 Jose CalderonJose Calderon 57122 gold badges55 silver badges1111 bronze badges 1

• Why dont you generate the div's proving also an ID? You can generate something like <div class="box" item-id="2"> And then find it with that – jviotti Commented Jan 23, 2013 at 19:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

So long as you're using jQuery, it's much easier:

HTML:

<div class="box">
    <button></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button></button>
    <input class="inputBox"></input>
</div>

JS (put this inside $(document).ready(...):

$('.box button').click(function(){
   $(this).next('.inputBox').show();
});

Here's an example

There a lot of ways to approach this scenario. Usually placing a click event on the element with html is not best practice. This is a strongly typed solution which fits into your example. It will pass the element which was clicked (the button element) into the function. Then, then function as written will find the closest element with class inputBox and issue jquery's show() to it.

html

<button onclick="buttonFunction(this)"></button>

js

function buttonFunction(el){
 $(el).parent().find('.inputBox').show();  
}