How to add dynamic jquery button?

Question

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.

Btw, this also is a problem if I add a click function like ' jQuery('button.delete').click(function() {return false;}); I mean it works when I do this on $(document).ready() but not for the dynamic added buttons. — eemceebee
– eemceebee, Commented Nov 11, 2010 at 16:41

rakis · Accepted Answer · 2010-11-11 21:01:08Z

3

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

answered Nov 11, 2010 at 21:01

rakis

781 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DavideDM · Accepted Answer · 2010-11-12 07:36:05Z

0

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

answered Nov 12, 2010 at 7:36

DavideDM

1,49517 silver badges20 bronze badges

Comments

DavideDM · Accepted Answer · 2010-11-15 07:35:06Z

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

Looks like I missed something important in my post... please have a look

Collectives™ on Stack Overflow

How to add dynamic jquery button?

UPDATE 1

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE 1

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related