I've got a page where I'm trying to fetch data using ajax and append it to a html table dynamically. Everything works fine but for one of the columns where i'm trying to style a link as a jquery button. I use the same css class for the button across the application and it works just fine in all other places. Just on the dynamically added row, the link shows up as a plain link instead of getting sytled as a jquery button.
3
-
Here is the fiddle on what i'm trying to do: jsfiddle.net/bobm76/FwyR2Bob76– Bob762014-02-19 01:25:26 +00:00Commented Feb 19, 2014 at 1:25
-
In your JSFiddle, the "Click me" button with the "jqbutton" class is styled for me, on all the dynamically added rows. I'm in Chrome 32Pete– Pete2014-02-19 01:28:35 +00:00Commented Feb 19, 2014 at 1:28
-
Interesting. I'm also on chrome 32 and it did not work for me till i incorporated the changes like in the answers below. I had updated my fiddle just a few minutes ago to include the extra line, without which the button is not styled.Bob76– Bob762014-02-19 01:57:00 +00:00Commented Feb 19, 2014 at 1:57
Add a comment
|
2 Answers
You should place this
$(".jqbutton").button();
into the click event handler function as well.
$("#test").click(function(){
console.log("button clicked");
$('<tr>').append(
$('<td>').text('Test data x'),
$('<td>').text('Test data y'),
$('<td>').text('Test data z'),
$('<td>').html('<a href="#" class="jqbutton">Click me</a>')
).appendTo('#testtable');
$(".jqbutton").button();
});
Comments
use .button() method inside click
$(function(){
$(".jqbutton").button();
$("#test").click(function(){
console.log("button clicked");
$('<tr>').append(
$('<td>').text('Test data x'),
$('<td>').text('Test data y'),
$('<td>').text('Test data z'),
$('<td>').html('<a id="test" class="jqbutton">Click me</a>')
).appendTo('#testtable');
$(".jqbutton").button();
});
});
Link to Demo
