CODEWITHSUNDEEP
jquery-uibutton
eemceebee
eemceebee

Reputation: 2666

How to add dynamic jquery button?

I have a table where I use jquery to add and delet rows. I also use jquery ui to render buttons.

When I add a new row, I also add a button in a cell, but this one is not rendered.

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

Any idea, how to solve this ?

thx

UPDATE 1

Looks like I forgot to post one important detail :

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

This works after loading the page but not for the new rows.

Upvotes: 1

Views: 11745

Answers (3)

DavideDM
DavideDM

Reputation: 1495

I tried and I didn't found any problems, but I changed the tag with the tag

This is my piece of code In the section head

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

function addRow is your code

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

In the section body

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

Try and give me a feedback D.

For handler click events you have to change this piece of code

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

Upvotes: 0

DavideDM
DavideDM

Reputation: 1495

To apply the theme you need to find the button, and then apply the style

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

Upvotes: 0

rakis
rakis

Reputation: 78

In the ready() function, you are creating jquery-ui styled buttons, but they will only apply to currently existing buttons.

Therefore, dynamically added buttons won't have this applied to them, so you'll have to modify your addRow function to apply the button() call in relation to the newly created markup.

Like this:

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

Upvotes: 3

Related Questions