Question

我正在尝试使用jquery：

1-动态添加复选框 2-正确定位。

到目前为止，我可以做1或2但不能做1和2.

这是我的HTML代码：

<!-- language: lang-html -->
<body>   
 <div id='myDiv'></div>
 <div id='myOtherDiv'>
 <button id='myButton'>my button</button>
 </div> 
</body>

这是我的js代码：

<!-- language: lang-js -->
jQuery(document).ready(

function ($)
{
  jQuery.noConflict();

function createCheckbox()
{
var   $myCheckbox   = $('<input id="myCheckbox" type="checkbox"></input><label for="myCheckbox">my checkbox</label>');
 $('#myDiv').append($myCheckbox);

 /*                                                                                                                                                          
  The following line fixes the "button displayed as unpressed" problem                                                                          
  but it breaks the .position call                                                                                                                           
 */
 // $myCheckbox = $('#myDiv > input');                                                                                                                       

    /* myCheckbox */
   $myCheckbox.button({
                      text: false,
                      icons: { primary: "ui-icon-refresh"}
      });

  $myCheckbox.change(
      function()
              {
                  if($myCheckbox.is(":checked"))
                  { alert('checked'); }
        else
                  {   alert('unchecked');}
              }
    );

var $myButton = $('#myButton');
$myCheckbox.position({my:"left", at:"right", of:$myButton });
}

createCheckbox();

});

上面的代码可以工作，但是在单击复选框并单击“已选中”警报上的“确定”后，即使选中了实际的复选框，jquery复选框按钮也会显示为未选中。

通过反复试验，我通过在追加后重新选中我的复选框来修复该问题。我不知道为什么会有效。

$myCheckbox = $('#myDiv > input');

当我取消注释上面的行时，复选框表现正常，并在选中时显示为已选中。但是，调用.position并没有正确定位复选框按钮。

请参阅：http://jsfiddle.net/roumbaba/uM3sS/1/

注意：只有当我动态添加输入/复选框时才会出现此问题。如果我只添加一个简单的按钮（使用普通而不是然后两个位置和检查显示satus工作正常。

我显然在这里忽略了整个过程的工作方式。特别是我不明白为什么用行

重新选中我的复选框

 $myCheckbox = $('#myDiv > input');

更改检查状态按钮的行为。为什么在我这样做之后位置不起作用。

Answer 1

如评论中所述。 .position 不接受任何论据。

我发现以下方法更可靠，可读：

$(document).ready(function() {
  $('checkbox').live('change', function() {
    if($('#myCheckbox').is(":checked"))
      { alert('checked'); }
    else
      { alert('unchecked'); }
  });
  createCheckbox();
}

function createCheckbox() {
  $('<input/>', {
    id: 'myCheckbox',
    type: 'Checkbox'
  }).appendTo('#myDiv');

  $('<label/>', {
    for: 'myCheckbox',
    text: 'my checkbox'
  }).appendTo('myCheckbox');

  $('<button/>', {
    text: false, // Necessary?
    icons: { primary: "ui-icon-refresh" }
  }.appendTo('myCheckbox');
}

希望我已经正确地理解了你想要做的事情。正如其他人提到的，我肯定会使用CSS进行正确的定位，而不是jQuery。将myDiv放在myOtherDiv的右侧应该相当简单。只需切换订单并使用float: left。

Answer 2

位置问题是我在复选框上使用了.position，但应该在复选框的标签上使用它。显然jqueryui使用复选框的标签而不是复选框本身来显示它的按钮。

<!-- language: lang-js --> 
var $myCheckboxLabel = $("label[for='myCheckbox']");
$myCheckboxLabel.position({my:"left", at:"right", of:$myButton });

这可以解决位置问题，同时仍然保持复选框状态正常工作。

我仍然不清楚为什么我必须首先将我的复选框附加到dom然后再次选择它以便在调用.button之后有一个正常运行的复选框/按钮。

如何正确动态添加复选框并使用jquery定位它

2 个答案: