Как добавить динамическую кнопку jquery?

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

Есть идеи, как это решить?

ТНХ

ОБНОВЛЕНИЕ 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

Чтобы применить тему, нужно найти кнопку, а затем применить стиль

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

Answer 3

Я пытался, и я не нашел никаких проблем, но я изменил тег с тегом

Это мой кусок кода В главе раздела

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

input [type= button] .delete {color: red `}

функция 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);