JQuery Square/circulaire de style

Question

mobile Dans mon application, je crée quelques boutons à l'aide de fonctions D3, mais quand ils sont affichés, ils n'ont pas les frontières circulaires comme les boutons codés en dur faire:

« Menu » est difficile codé, les quatre autres boutons sont des fonctions D3

j'ai pensé que j'avais foiré les classes des boutons, mais ils ont la classe ui-corner-all:

Pourquoi ne sont-ils obtiennent Styled correctement? (Il n'y a pas CSS personnalisé appliqué en plus du texte en rouge) Ils devraient regarder le long des lignes de ces exemples: http://demos.jquerymobile.com/1.4.2/checkboxradio-radio/

Edit: Voici la fonction D3:

this.initialLoad = function(){ 
     //var data= ["First button with some long text in the descriptionnnnnnnnnnnnnnnnnnnnnnnnnnnn", "Second button with some long text in the description"]; 

     console.log("initialLoad"); 
     //Create the header 
     headerElem = d3.select("#uploadedCompany") 
     .append("p"); 
     //add the required buttons for selecting the right sheet for the set 
     var Addedbuttons = d3.select("#TheButtons").selectAll("input") 
      .data(
          function(){ 
       var titlelist = Array(); 
       for (var n = 0; n < numOfSheets; n++){ 
        titlelist[n]= upLoadedData[n].title; 
       } 
       return titlelist; 
      } 
        ) 
      .enter() 
      .append('label') 
      .attr('for',function(d,i){ return 'Statement_a'+i; }) 
      .text(function(d) { return d; }) 
      .append("input")  
      .attr("type", "radio") 
      .attr("name","stmntRadio") 
      .property('checked',function (d,i){if (i===pSI) return true; else return    `false;})` 
      .attr("id", function(d,i) { return i; }) 
      .attr("onClick", "rbStatementClicked(this)"); 

     //make sure that the trendON is false 
     d3.select("#cbTrendOn").node().checked = false;   
     updateSheet(); 
        $("#TheButtons").enhanceWithin(); 
    }; 

Answer 1

Je suppose votre #TheButtons L'élément DOM est configuré en tant que groupe de contrôle avec data-type = "horizontal". Dans ce cas, il suffit d'ajouter .controlgroup ("refresh") après l'amélioration à l'intérieur. Ajoutez également les contrôles dynamiques à la commande .ui-controlgroup-controls DIV dans le groupe de contrôle.

var Addedbuttons = d3.select("#TheButtons .ui-controlgroup-controls ").selectAll("input") 
      .data(data) 
      .enter() 
      .append("input")  
      .attr("type", "radio") 
      .attr("name","stmntRadio") 
      .attr("id", function(d,i) { return 'Statement_a'+i; }) 
      .attr("onClick", "rbStatementClicked(this)") 
      .append('label') 
      .attr('for',function(d,i){ return 'Statement_a'+i; }) 
      .text(function(d) { return d; }) 
; 

$("#TheButtons").enhanceWithin().controlgroup("refresh"); 

Voici une DEMO