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

Question

I have an HTML code like this 我有这样的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>

I have a button and when the button is clicked the the new tr with 4 td added into table, the code become like this. 我有一个按钮，当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>

Now i used delete image to delete current row which is dynamically added in iframe .For same am using that Jquery code : 现在我使用delete图像来删除当前行，该行是在iframe dynamically添加的。同样，我正在使用该Jquery代码：

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

But after click on delete image button the newest added tr inside the iframe is not gives alert . 但是单击delete图像按钮后，iframe中最新添加的tr不会发出alert 。

I am using `Jquery 1.9.1' 我正在使用'jQuery 1.9.1'

Please help me 请帮我

Answer 1

Maybe the issue is that you are trying to bind the click event to elements inside the iframe before it has finished to load. 可能的问题是，您试图在完成加载之前将click事件绑定到iframe元素。 You can try to bind the event handler after the iframe has loaded: 您可以在iframe加载后尝试绑定事件处理程序：

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

EDIT: This is a simple example of what I mean. 编辑：这是我的意思的简单例子。 You need to give enough time to the iframe to build its own DOM before you can register any handler. 您需要给 iframe足够的时间来构建自己的DOM，然后才能注册任何处理程序。

This is the content of index.html : 这是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>

This is the content of table.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