如何在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