jqueryui elements not loading on button click

Question

I am having a bit of a problem with jqueryui elements that are called from inside a script. They are not loading as jqueryui elements. I think i need to somehow call the jquery script again but i am not too sure how to go about this.

the button click code is

$("#parcels-add").click(function () {
    //remove existing table rows if there are any
    $("#added-parcels tr td").remove();
    $("#parcel").css("display", "block");
    //Add the rows
    for (var i = 0; i < numOfParcels; i++) {
       $("#added-parcels").prepend("<tr>" +
                                   "<td>" + "01" + "</td>" +
                                   "<td><input type='text' value='cm' class='package-value' /></td>" +
                                   "<td><input type='text' value='cm' class='package-value' /></td>" +
                                   "<td><input type='text' value='cm' class='package-value' /></td>" +
                                   "<td><input type='text' value='cm' class='package-value' /></td>" +
                                   "<td><button id='package-delete'>Delete</button></td>") +
                                 "</tr>";
      }
});

The button in the for loop is not displaying like the rest of the jqueryui buttons. as seen below enter image description here

It looks and acts like a normal HTML button

enter image description here

I also have a simple script to remove the text in the input text box's which is not working

Would this maybe have something to do with the ordering of the javascript files? There is no error in the chrome console but this is not working as it should.

Any help would be much appreciated.

Thanks

You cannot have multiple buttons (or elements) with the same id. — Gorgsenegger
– Gorgsenegger, Commented Jul 4, 2013 at 19:25
You are removing the cells and not the rows, change it to: $("#added-parcels tr").remove(); (this won't fix the main issue) — Balint Bako
– Balint Bako, Commented Jul 4, 2013 at 19:47
Here is the fiddle. Its seems to works but if you see the // script is not working. — user1752532
– user1752532, Commented Jul 4, 2013 at 19:56

Balint Bako · Accepted Answer · 2013-07-04 19:50:28Z

1

Call .button() on the new buttons after the for loop.

 $("#added-parcels button").button();

answered Jul 4, 2013 at 19:50

Balint Bako

2,5701 gold badge16 silver badges14 bronze badges

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

2 Comments

Balint Bako Over a year ago

The same applies for every jQuery UI element: stackoverflow.com/questions/3028912/…

user1752532 Over a year ago

Sweet!! Thank you and then obviously call any other custom script functions that apply to that code block as well.

Collectives™ on Stack Overflow

jqueryui elements not loading on button click

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related