0

動的に追加された要素の jQuery セレクターが機能していないようです。簡単に言えば、機能が追加された一連のチェックボックスがあります。PHP は、追加するデータの行ごとに add(..) エントリを作成します (この場合、ファイル名、コメント、およびそれを削除するためのチェックボックス)。これらはハードコードされたテンプレートを使用して追加され、これは正常に機能します。add スクリプトは投稿しませんが、次のようなエントリが生成されます (簡潔にするために修正)...

<tr>
  <td class="cell-file"><a href="...">afile.jpg</a></td>
  <td class="cell-comment">A comment</td>
  <td class="cell-remove a-center last"><input type="checkbox" id="...is_delete" name="...is_delete" value="1" class="removable"></td>
</tr>

別のチェックボックスの状態が変化したら、次のように、動的に追加されたすべてのチェックボックスをチェック済み (およびボタンを無効にする) に設定する必要があります... 

function setAddButton(arg){
if(arg){
    $('add-attachment').addClassName('disabled');
    Event.stopObserving('add-attachment', 'click');
    // Check all removable checkboxes
    $('input.removable:checkbox').attr('checked', true);
}else{
    $('add-attachment').removeClassName('disabled');
    Event.observe('add-attachment', 'click', orderAttachment.add.bind(orderAttachment));
}
}

問題は、セレクター$('input.removable:checkbox')が null に戻ることです。$('.removable:checkbox')&を含むこのセレクターのさまざまな形式を試しまし$('input:checkbox.removable')たが、何も選択されていません。

さまざまな投稿で、このセレクターは機能するはずですが、機能しません。したがって、これは、jQuery が動的に追加された要素を「見る」ことができないためであると想定しています。.live() または .on() の使用に関するさまざまな投稿を読みましたが、これは動的に追加された要素にイベント ハンドラーを追加することに関するものです。イベントハンドラーは必要ありません。動的に追加されたチェックボックスのチェック済み属性を選択して設定できるようにしたいだけです。

何か案は？

4

4 に答える 4

0

プロパティpropの代わりに使用できるチェックボックスをオンにするには、 jquery.1.6+ 用です。下位バージョンを使用している場合は、これを 試してください。attr
propattr

$('input.removable:checkbox').prop('checked', true);
于 2013-08-20T10:53:33.410 に答える
0

さて、このサイトの問題は、サードパーティのテーマと私が変更しているサードパーティの拡張機能を備えた Magento です。このサイトでは、Prototype と jQuery の両方を使用しています。[Prototype は jQuery のスーパーセットだと思っていましたが、そうではないようです!] 動的チェックボックスを追加するのは Protptype であり、標準の jQuery セレクターはこれらに対して機能しません。

この場合、$('add-attachment').addClassName('disabled');動作しますが、$('input.removable:checkbox')動作しません。Prototype の正しい (または少なくとも 1 つの有効な) 構文は次のとおりです。

$$('input[class="removable"]').each(function(element) {
    element.checked = true;
});

何が起こっているのかを解明するための簡単なテストを作成しました。私が欲しかったもう1つのことは、「コントロール」チェックボックスがチェックされている場合、状態を表示および投稿しながら、削除チェックボックスがチェックされないようにすることでした。ソリューションは単純ですが、実装するのは難しいものでした。Prototype だけで機能するものは、jQuery で使用すると機能しませんでした。このソリューションは、Prototype のみで動作し、jQuery で使用した場合にも動作します。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
  </head>

  <body>
    <div id="checkboxes">
      <div id="cbcontrol">
        <input type="checkbox" id="cb1" name="cb1" onclick="forceIt(this.checked)"/>
        <label for="cb1">Check this to force-check the others</label>
      </div>
      <div id="cbhard">
        <input type="checkbox" id="cb2" name="cb2" class="cb" onclick="fixIt(this)"/>
        <label for="cb2">Checkbox hard coded</label>
      </div>
      <div id="cb-template" style="display:none">
        <input type="checkbox" id="#id#" name="#name#" class="cb" onclick="fixIt(this)"/>
        <label for="#id#">Checkbox dynamic</label>
      </div>        
    </div>

    <script type="text/javascript">
       // Add a checkbox dynamically using the template
       var cbtemplate = $('cb-template').innerHTML;
       var templateSyntax = /(^|.|\r|\n)(#(\w+)#)/;
       var template = new Template(cbtemplate, templateSyntax);
       data = {};
       data.id  = 'cb2';
       data.name  = 'name';
       Element.insert('cb-template', {'before':template.evaluate(data)});

       // Force checkbox states
       function forceIt(state) {    
         $$('input[class="cb"]').each(function(cb) { cb.checked = state; });
       }

       // Keep checkboxes checked
       function fixIt(cb) {
         if ($('cb1').checked) {
           cb.checked=!cb.checked;
         }
       }
     </script>
   </body>
 </html>
于 2013-08-20T16:54:33.490 に答える