如何添加动态jquery按钮?

时间:2010-11-11 10:40:18

标签: jquery-ui button

我有一个表格,我使用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();
}

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

3 个答案:

答案 0 :(得分:3)

在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);

答案 1 :(得分:0)

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

更改了标签

这是我的一段代码 在头部

<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);

答案 2 :(得分:0)

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

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