1

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();

});

上記のコードは機能しますが、チェックボックスをクリックして「チェック済み」アラートで「OK」をクリックすると、実際のチェックボックスがオンになっているにもかかわらず、jquery チェックボックスボタンがオフとして表示されます。

試行錯誤により、追加後にチェックボックスを再選択することでその問題を修正しました。なぜそれが機能するのかはわかりません。

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

上記の行のコメントを外すと、チェックボックスが適切に動作し、チェックされているときにチェック済みとして表示されます。しかし、.position の呼び出しでは、チェックボックス ボタンが適切に配置されません。

参照: http://jsfiddle.net/roumbaba/uM3sS/1/

注: この問題は、入力/チェックボックスを動的に追加した場合にのみ発生します。シンプルなボタンのみを追加すると（代わりにプレーンを使用すると、位置とチェック済みの表示ステータスの両方が正常に機能します。

ここでは、プロセス全体がどのように機能するかについて、明らかに重要な何かが欠けています。特に、行でチェックボックスを再選択する理由がわかりません

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

ステータスの確認ボタンの動作を変更します。そして、私がそれをした後に位置が機能しないのはなぜですか。

4

2 に答える 2

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');
}

うまくいけば、私はあなたがやろうとしていることを正しく理解しています. 他の人が言及したように、適切な配置には jQuery ではなく CSS を使用することは間違いありません。myDivの右側に配置するのはかなり簡単ですmyOtherDiv。順序を入れ替えて使用するだけfloat: leftです。

于 2013-01-26T17:39:30.177 に答える
0

位置の問題は、チェックボックスで .position を使用したことですが、代わりにチェックボックスのラベルで使用する必要がありました。どうやらjqueryuiは、チェックボックス自体ではなく、チェックボックスのラベルを使用してボタンを表示します。

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

これにより、チェックボックスのステータスを適切に機能させながら、位置の問題が修正されます。

.button を呼び出した後にチェックボックス/ボタンを適切に機能させるために、最初にチェックボックスを dom に追加してから再度選択する必要がある理由については、まだ不明です。

于 2013-01-26T19:11:49.590 に答える