如何在iframe中动态创建的表格元素上添加事件

Question

我有这样的HTML代码

 <table id="Table1">
        <tbody>
            <tr>
                <th scope="col">
                    Srno.
                </th>
                <th scope="col">
                    Emp code
                </th>
                <th scope="col">
                    Name
                </th>
                <th scope="col">
                    Mobile No
                </th>
                <th scope="col">
                    Delete
                </th>
            </tr>               
        </tbody>
    </table>

我有一个按钮，当button被点击的新tr与4 td加入表，成为这样的代码。

 <table id="Table1">
        <tbody>
            <tr>
                <th scope="col">
                    Srno.
                </th>
                <th scope="col">
                    Emp code
                </th>
                <th scope="col">
                    Name
                </th>
                <th scope="col">
                    Mobile No
                </th>
                <th scope="col">
                    Delete
                </th>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td style="display: none;">
                    198
                </td>
                <td>
                    SHR003
                </td>
                <td>
                    Saurabh khandelwal
                </td>
                <td>
                    9891491920
                </td>
                <td>
                    <img class="clsImage" src="../../images/delete1.png" style="cursor: pointer;">
                </td>
            </tr>
        </tbody>
    </table>

现在我使用delete图像来删除当前行，该行是在iframe dynamically添加的。同样，我正在使用该Jquery代码：

$("iframe").contents().find('body').on("click", '.clsImage', function (e) {
    alert('111');
       });

但是单击delete图像按钮后，iframe中最新添加的tr不会发出alert 。

我正在使用'jQuery 1.9.1'

请帮我

Answer 1

可能的问题是，您试图在完成加载之前将click事件绑定到iframe元素。 您可以在iframe加载后尝试绑定事件处理程序：

    $('iframe').load(function () {
      $(this).contents().find('body').on('click', '.clsImage', function () {
        alert('111');
      });
    });

编辑：这是我的意思的简单例子。 您需要给 iframe足够的时间来构建自己的DOM，然后才能注册任何处理程序。

这是index.html的内容：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript">
      $(function() {
        $('iframe').load(function () {
          $(this).contents().find('body').on('click', '.clsImage', function () {
            alert('111');
          });
        });
        $('button').click(function () {
          var $table = $('iframe').contents().find('table');
          $table.append('<tr><td>1</td><td style="display: none">198</td><td>SHR003</td><td>Saurabh khandelwal</td><td>9891491920</td><td><img class="clsImage" src="../../images/delete1.png" style="cursor: pointer;"></td></tr>');
        });
      });
   </script>
  </head>
  <body>
    <button>add</button>
    <iframe src="table.html"></iframe>
  </body>
</html>

这是table.html的内容：

<table id="Table1">
  <tbody>
    <tr>
      <th scope="col">
        Srno.
      </th>
      <th scope="col">
        Emp code
      </th>
      <th scope="col">
        Name
      </th>
      <th scope="col">
        Mobile No
      </th>
      <th scope="col">
        Delete
      </th>
    </tr>
  </tbody>
</table>

如何在iframe中动态创建的表格元素上添加事件

问题描述

1 个解决方案

解决方案1
0 2014-10-03 09:38:56

如何在iframe中动态创建的表格元素上添加事件

问题描述

1 个解决方案

解决方案1 0 2014-10-03 09:38:56

解决方案1
0 2014-10-03 09:38:56