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

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.