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

我有一个HTML代码，这样如何动态创建的表元素添加事件中的iframe

<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图像删除其dynamically在iframe加入当前行。对于同样正在使用Jquery代码：

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

但是点击之后delete图像按钮最新加入tr内该iframe不给alert。

我使用`jQuery的1.9.1'

请帮我

来源

2014-10-03 Neeraj Dubey

表是iframe中？还是只有clsImage？ – 2014-10-03 07:37:08

你好，表格在'iframe'里面，'clsImage'只是通过'classname'来添加元素。 – 2014-10-03 07:40:06

.live（）dnt工作？ – madhairsilence 2014-10-03 09:48:30

也许问题是，你正试图将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>

来源

2014-10-03 09:38:56 dreyescat

嘿表中添加的行是在'iframe'里面，只有当'iframe'完全加载时才会发生。 – 2014-10-03 12:45:20

你什么时候注册点击处理程序？它是否在'jQuery.ready'回调中注册？添加行时无关紧要，因为您正在为'.clsImage'中的所有点击在iframe正文上注册委托事件。 – dreyescat 2014-10-03 13:19:30

是的，我已经将它添加到'$（document）.ready'上。 – 2014-10-03 14:13:08

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

回答

相关问题