将jQuery UI按钮样式应用于由load（）替换的元素

Question

我有一个HTML表，其中有人可以在表中添加新行。

<table id="webcam-table"> 
<thead> 
    <tr> 
     <th>Camera <br>Type</th> 
     <th>Name</th> 
     <th>Quality</th> 
     <th>Motion <br>Detection</th> 
     <th>Email <br>Notice</th> 
     <th>Sensitivity</th> 
     <th>Actions</th> 
    </tr> 
</thead> 

<tbody> 
    <tr data-hash="http://www.my.com/notify.php/67caf4d223169c05b8c700acfb615af13a5d3ab9"> 
     <td> 
      AXIS      </td> 
     <td title="asdf"> 
      asdf      </td> 
     <td> 
      HIGH      </td> 
     <td> 
      On      </td> 
     <td> 
      On      </td> 
     <td> 
      N/A      </td> 
     <td> 
      <button class="editbutton" onClick='edit(this, "AXIS", "asdf", "0", "67caf4d223169c05b8c700acfb615af13a5d3ab9", "1", "1", "1", "asdf", "asdf", "234")'>Edit Camera</button> 

      <button class="deletebutton" data-delete="67caf4d223169c05b8c700acfb615af13a5d3ab8">Delete Camera</button> 

      <button class="axis-detailsbutton">API Key</button> 
     </td> 
    </tr> 
</tbody> 
</table> 

此表中这是我悲伤的原因行一些按钮。我可以成功地使用jQuery ajax()处理此：

var dataString = "cameratype=" + cameratype + "&cameraname=" + cameraname + "&cameraquality=" + cameraquality + "&camerastatus=" + camerastatus + "&emailnotice=" + emailnotice + "&camerauser=" + camerauser + "&camerapass=" + camerapass + "&cameraip=" + cameraip + "&cameraport=" + cameraport +"&format=raw"; 

jQuery.ajax({ 
    url: "index.php?option=com_cam&task=add", 
    dataType: 'json', 
    data: dataString, 
    success: function(data){ 
     //bunch of stuff here that figures out the parameters 

     jQuery("#webcam-table > tbody:last").append("<tr><td>"+cameratype+"</td><td>"+cameraname+"</td><td>" 
       +cameraquality+"</td><td>"+params.camerastatus+"</td><td>" 
       +params.emailnotice+"</td><td>"+params.sensitivity+"</td><td><button class=\"editbutton\" onClick='edit(this, \"" 
       +cameratype+"\", \""+cameraname+"\", \""+params.cameraqualityedit+"\", \"" 
       +data.camerahash+"\", \""+params.camerastatusedit+"\", \""+params.emailnoticeedit+"\", \"\", \"" 
       +camerauser+"\", \""+cameraip+"\", \""+cameraport+"\")'>Edit Camera</button><button class=\"deletebutton\" data-delete=\"" 
       +data.camerahash+"\">Delete Camera</button><button class=\"axis-detailsbutton\">API Key</button></td></tr>"); 
    } 
}); 

我的问题是，并非一切加载，因为它已经拥有。例如，按钮都是程式化与jQuery UI的按钮：

jQuery(".editbutton").button({ 
    icons: { 
     primary: "ui-icon-pencil" 
    }, 
    text:false 
}); 

我可以把它们添加到success功能，但我不知道这是复制我的代码的最佳实践。我想这很容易解决，但我想知道是否有更好的方法来做到这一点。

我的其他问题是CSS不适用。所以我有这些按钮之间的一些填充，但我猜是因为它已经加载它不显示。任何人都可以提出一个解决方法吗？

目前，CSS被应用在页面加载只：

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.20.custom.css" /> 
<link rel="stylesheet" href="css/jquery.ibutton.min.css" type="text/css" /> 

Answer 1

你是正确的，因为jQuery的/ editbutton调用仅修改已经在当时存在的按钮，而不是在未来的行添加按钮。

考虑建设部分的行，加入jQuery的风格一路走来：

var newtr = jQuery("<tr><td>"+cameratype+"</td><td>"+cameraname+"</td><td>" 
        +cameraquality+"</td><td>"+params.camerastatus+"</td><td>" 
        +params.emailnotice+"</td><td>"+params.sensitivity+"</td></tr>"); 

var editbutton = jQuery("<button class=\"editbutton\" onClick='edit(this, \"" 
        +cameratype+"\", \""+cameraname+"\", \""+params.cameraqualityedit+"\", \"" 
        +data.camerahash+"\", \""+params.camerastatusedit+"\", \""+params.emailnoticeedit+"\", \"\", \"" 
        +camerauser+"\", \""+cameraip+"\", \""+cameraport+"\")'>Edit Camera</button>") 
    .button({ 
       icons: { 
        primary: "ui-icon-pencil" 
       }, 
       text:false 
      }); 
jQuery("<td></td>").append(editbutton).appendTo(newtr); 

// .. etc. for the other buttons 

jQuery("#webcam-table > tbody:last").append(newtr);