Question

我有一个表格，我使用jquery来添加和删除行。我还使用jquery ui来渲染按钮。

当我添加一个新行时，我还在一个单元格中添加一个按钮，但是这个按钮不会被渲染。

var tdata = "<tr>";
tdata += "<td align=\"right\">my data</td>";
tdata += "<td align=\"left\">";
tdata += "<button class=\"delete\">delete</button>";
tdata += "</td>";
tdata += "</tr>";

jQuery('#mytable > tbody:last').append(tdata);

任何想法，如何解决这个问题？

THX

更新1

看起来我忘记发布一个重要细节：

$(document).ready(function() {  
jQuery('button.delete').button();
}

这在加载页面后有效，但不适用于新行。

Answer 1

在ready（）函数中，您正在创建jquery-ui样式按钮，但它们仅适用于当前存在的按钮。

因此，动态添加的按钮不会应用它们，因此您必须修改addRow函数以应用与新创建的标记相关的button（）调用。

像这样：

var tdata = "<tr>";
tdata += "<td align=\"right\">my data</td>";
tdata += "<td align=\"left\">";
tdata += "<button class=\"delete\">delete</button>";
tdata += "</td>";
tdata += "</tr>";
var tdataElement = jQuery(tdata);
jQuery('button.delete',tdataElement).button();
jQuery('#mytable > tbody:last').append(tdataElement);

Answer 2

我尝试过，但没有发现任何问题，但我用标签

更改了标签

这是我的一段代码在头部

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fooBtn').bind('click', function(event) {
            addRow();
    });
    });
 </script>

输入[type = button] .delete { 红色 `}

function addRow是你的代码

function addRow(){
    var tdata = "<tr>"; 
    tdata += "<td align=\"right\">my data</td>"; 
    tdata += "<td align=\"left\">"; 
    tdata += "<input type=\"button\" class=\"delete\" value=\"delete\">"; 
    tdata += "</td>"; 
    tdata += "</tr>"; 
    jQuery('#mytable > tbody:last').append(tdata); 
}

在章节正文

中

<table id="mytable">
    <tr>
        <td align="right">
            my data
        </td>
        <td align="left">

            <input type="button" class="delete" value="delete"></input>
        </td>
    </tr>
   </table>
   <input type="button" id="fooBtn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only delete" value="Add Row" />

尝试并给我一个反馈 d。

对于处理程序点击事件，您必须更改此段代码

var tdataElement = jQuery（tdata）;

 var bt = tdataElement.find(":button");
  bt.button();
  bt.click(function() {
      alert('Handler for .click() called.');
  });
  jQuery('#mytable > tbody:last').append(tdataElement);

Answer 3

要应用您需要找到按钮的主题，然后应用样式

tdataElement.find(":button").button();
jQuery('#mytable > tbody:last').append(tdataElement);

如何添加动态jquery按钮？

更新1

3 个答案: