jQuery executing script multiple times

Question

I'm doing a little project and got a small problem. I'm printing out a table from MySQL database data.

One of the fields is image. I print it out and I want it to pop up when clicked but all I can do is execute the script only once, meaning only the first picture on the page will pop up when clicked.

<div id="contentRight">

    .......

    <tr>
      <td align="center" valign="top">
        <?php do { ?>
            <table width="630" border="1" class="TableStyle">
              <tr>
    ........
        <script>
        $(document).ready(function() {
           $('#img').on('click','.btn', function ()  {
              var image = '<img src="<?php echo $row_ManageUsers['preview_thumb']; ?>">';
              $('#popover').popover({placement: 'bottom', content: image, html: true});
           });
        });
        </script>
                <td width="100" height="100" rowspan="3" id="img"><a id="popover" class="btn" rel="popover" data-content="" title="Preview" >
                <img src="<?php echo $row_ManageUsers['preview_thumb']; ?>" width="130px" height="130px" class="img-thumbnail" $nbsp;></a>
              </td>
              </tr>

    .......
          <?php } while ($row_ManageUsers = mysql_fetch_assoc($ManageUsers)); ?> 
    .......

The script is copied and it gets a proper value every time but it will not execute.

Any advice?

why are you putting a selector '.btn', in the event listener? — satchcoder
– satchcoder, Commented Feb 2, 2015 at 18:13
@j08691 Yes, that was the intention, or at least how I imagined it would work — Aleksandr
– Aleksandr, Commented Feb 2, 2015 at 19:32
@Joerg Doing makes the images not display on the page at all — Aleksandr
– Aleksandr, Commented Feb 2, 2015 at 19:33

Jacques · Accepted Answer · 2015-02-02 18:17:00Z

1

If you're outputting <td id="img"> for every <td>, that is your issue. IDs need to be unique, so jQuery only finds the first instance of #img when the click happens.

Change id="img" to class="img" and change this:

$('#img').on('click','.btn', function ()...

to this:

$('.img').on('click','.btn', function ()...

That should do the trick.

Also, here is info regarding IDs and the HTML5 spec:

http://www.w3.org/TR/html5/elements.html#the-id-attribute

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

answered Feb 2, 2015 at 18:17

Jacques

3,7942 gold badges23 silver badges45 bronze badges

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

2 Comments

Aleksandr Over a year ago

No results with the classes. I get even less response from the thing

Jacques Over a year ago

Glad it worked for you. Also, you may want to take a look at @Joerg 's answer below. He gives a couple of good tips on how to organize your code.

Joerg · Accepted Answer · 2015-02-03 09:44:34Z

Try to give your code a little bit more structure and separate the HTMl and the JS part.

Output your table rows by looping or what ever AND remove the ID's and use CLASSES. ID's have to be unique in the document. Also remove width and heigth and do that in CSS. Your row should look something like that:

<tr>
   <td rowspan="3">
      <a class="btn" rel="popover" title="Preview" >
         <img src="<?php echo $row_ManageUsers['preview_thumb']; ?> />"
      </a>
   </td>
</tr>

Test the above code, you should see the images. Next step is to write the jQuery part.

<script type='text/javascript'>
   $(document).ready(function() {
      $('.btn').on('click', function (){
         var image = '<img src="' + $(this + ' img').attr('src') + '" />';
         $(this).popover({
            placement: 'bottom',
            content: image,
            html: true
         });
      });
   });
</script>

This part you put in the HEAD of your HTML after the part, where you are loading jQuery.

I have not tested the code.

TIPP: If you are unsure with solving a problem, then cut it into small pieces, write the code and test is. In the end put all the small parts together.

Collectives™ on Stack Overflow

jQuery executing script multiple times

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related