jQuery多次执行脚本

Question

我正在做一个小项目，遇到一个小问题。 我正在从MySQL数据库数据打印一张表。

图像之一。 我将其打印出来，希望它在单击时弹出，但是我只能执行一次脚本，这意味着单击时仅弹出页面上的第一张图片。

<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)); ?> 
    .......

该脚本将被复制，并且每次都会获得一个适当的值，但不会执行。

有什么建议吗？

Answer 1

如果要为每个<td>输出<td id="img"> <td> ，那就是您的问题。 ID必须是唯一的，因此jQuery仅在单击发生时才查找#img的第一个实例。

将id="img"更改为class="img"并进行以下更改：

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

对此：

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

这应该够了吧。

另外，以下是有关ID和HTML5规范的信息：

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

id属性指定其元素的唯一标识符（ID）。 该值在元素的主子树中的所有ID中必须唯一，并且必须至少包含一个字符。 该值不得包含任何空格字符。

Answer 2

尝试给您的代码更多的结构，并分离HTMl和JS部分。

通过循环或其他方式输出表行，然后删除ID并使用CLASSES。 ID在文档中必须唯一。 还要删除宽度和高度，并在CSS中完成。 您的行应如下所示：

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

测试上面的代码，您应该看到图像。 下一步是编写jQuery部分。

<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>

这部分放在加载jQuery的部分之后，放在HTML的HEAD中。

我没有测试代码。

TIPP：如果不确定解决问题，则将其切成小块，编写代码并进行测试。 最后，将所有小零件放在一起。