Jquery function which is added from html and div that has been called from php on webpage is not working properly

Question

I'm having problem with a div which has a button on it.Button has id='delsts' and that whole div is fetched from php like below code:-

 //php code 
 foreach ($data as $row) {
          $status = $row['status'];
        $fn = $row['firstname'];
        $time =$row['posted_dt'];
        echo "<div id='stsshown'>
                <div class='upropic'></div>
                <span class='uname'><a href='#'>".ucfirst($fn)."</a></span>
                <span class='postdt'>".$time."</span><form action='#'><input type='button' value='x' id='delsts' title='remove from timeline' name='delsts'></form>
                <div id='detailbox'>
                asdasd
                </div>
        <div class='stsbox'>".$status."</div></div>";
    }

And this below jquery function is directly added from html(not php)

   //Jquery code
<script type="text/javascript">
   $(document).ready(function(){
    $(document).on('click','#delsts',function(){
            $('#detailbox').slideToggle('fast');

 });
</script>

Now, according to my php code I have fetched some data first so, everything is fine there I get some five div on my webpage (as I have five data on database related to that div).Now secondly jquery code is handling onclick event function on id 'delsts' of those five div.Now the main problem is that when I click those button of any five div my jquery function works for only first div out of other div why?how can we make every div work same jquery onclick event function individually?

Tyr · Accepted Answer · 2015-01-11 16:09:14Z

1

Do not use id with the same value for multiple elements. Use a class selector instead for all elements.

Example HTML:

<div class='stsshown'>
    <div class='upropic'></div>
    <span class='uname'><a href='#'>username</a></span>
    <span class='postdt'></span><form action='#'><input type='button' value='x' class='delsts' title='remove from timeline' name='delsts'></form>
    <div class='detailbox' style="display:block;">
        test
    </div>
    <div class='stsbox'></div>
</div>

JS:

$(document).ready(function(){
    $('.delsts').on('click', function(){
        $(this).closest('.stsshown').find('.detailbox').slideToggle('fast');
    });
});

This example is usable for generation of multiple sets of elements you want to achieve.

edited Jan 11, 2015 at 16:09

answered Jan 11, 2015 at 15:52

Tyr

2,7561 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SOuřaan Gřg Over a year ago

Tyr bro your code did some new changes :D Now when i click any one div button then together all five div 'detailbox' slides down.Can you please help me how to make detailbox silde down of that div which we had click button.Not all div only those div which we click button.

Tyr Over a year ago

The code works. Maybe you have missed $(this) in the click handler

SOuřaan Gřg Over a year ago

ya bro you were correct! haha..i found that mistake when I was trying Mike W answer :D Thanks alot bro :) (sorry reputation is below 15 i cannot vote up)

Mike W · Accepted Answer · 2015-01-11 16:20:06Z

There can be only 1 id element with the same name in the document, but you generate more of them in loop.

Use classes instead of IDs, or assign unique IDs for each item.

change your jquery code to:

<script type="text/javascript">
   $(document).ready(function(){
    $(".delsts").click(function(){
            $(this).next(".detailbox").slideToggle('fast');
    });

 });
</script>

and php:

 foreach ($data as $row) {
          $status = $row['status'];
        $fn = $row['firstname'];
        $time =$row['posted_dt'];
        echo "<div class='stsshown'>
                <div class='upropic'></div>
                <span class='uname'><a href='#'>".ucfirst($fn)."</a></span>
                <span class='postdt'>".$time."</span><form action='#'><input type='button' value='x' class='delsts' title='remove from timeline' name='delsts'></form>
                <div class='detailbox'>
                asdasd
                </div>
        <div class='stsbox'>".$status."</div></div>";
    }

Collectives™ on Stack Overflow

Jquery function which is added from html and div that has been called from php on webpage is not working properly

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related