2

まず第一に、私は jQuery に非常に慣れていないと言いたいです。昨日始めたばかりなので、いくつかのロジックについてちょっと曖昧です。最善の方法を使用していない場合は、遠慮なく修正してください。

基本的に私がやりたいことは次のとおりです。

  • いくつかのボタンがあるウェブページがあります
  • ボタンの 1 つをクリックすると、いくつかの要素を含む div が読み込まれます (押されたボタンによって異なります)。
  • これらのケースのいくつかでは、ロード時に ajax を入力したいドロップダウン リストがあります。

ボタンと div の読み込みは正しく処理できますが、ドロップダウン リストに少し問題があります。ドロップダウンがドキュメントにロードされたときに ajax 呼び出しを実行したいのですが、その方法がわかりません。

ボタンの 1 つをクリックすると作成される HTML の一部:

<div class='content'>
  <select class='dropdown'></select>
</div>

これは、ボタンをクリックした後にのみドキュメントに追加されます。そもそもそこにはありません (基本的に、異なるボタンはコンテンツ div に異なるものをロードするため)。

JS で最初に試したこと:

$('select.dropdown').load(function() {
   alert('dropdown loaded');
});

これはまったく機能しませんでした。この小さな JS をどこに置いても、アラートは表示されませんでした (html で選択を作成する前に配置しようとしましたが、後で配置しようとしましたが、アラートを受け取ったことはありません)。

だから私は準備ができた関数で試しました:

$('select.dropdown').ready(function() {
  alert('dropdown loaded');
});

そして、それはうまくいきました。アラートを次のような .post() に置き換えました。

$('select.dropdown').ready(function() {
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $('select.dropdown').append("html stuff with <option>");
    });
  }, 'json');

そして、それはうまくいきました。しかし問題は、今度は .ready() イベントを発生させた select タグだけを設定したいので、 $(this) を試してみました:

$('select.dropdown').ready(function() {
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $(this).append("html stuff with <option>");
    });
  }, 'json');

そして、それはうまくいきませんでした。「これ」が参照しているものを確認するためにアラートを追加しようとすると：

$('select.dropdown').ready(function() {
  alert($(this).attr('class'));
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $(this).append("html stuff with <option>");
    });
  }, 'json');

「未定義」になります。

基本的に私の質問は次のとおりです。

  • .load() ではなく .ready() が機能するのはなぜですか?
  • .ready() 関数で $(this) を使用して、ready イベントを発生させたドロップダウンを参照するにはどうすればよいですか?

最初のソリューションではなく $(this) を使用したい理由は、同じ HTML マークアップと同じ JS コード (可能であれば) を使用する他のドロップダウンを動的に追加するためです。準備イベント。

それを行う方法に関するアイデア/アドバイスはありますか?

4

2 に答える 2

0

ドロップダウンをペイントする前にドロップダウンを設定できない特別な理由はありますか? そのようにイベントを連鎖させる方がはるかに簡単です。それが最も簡単なオプションです。

それができない場合は、ドロップダウンが DOM に追加されたら、またはイベント.eachでコールバックを使用してドロップダウンを設定できます。あなたはそのコード スニペットを提供していないので、これについていくつかの仮定を立てました。appendappendTo

例：

var content = $("<div class='content'>").appendTo(body);

$("<select class='dropdown'></select>")
.appendTo(content).each(function() {
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $(this).append("<option>");
    });
  });
});
于 2013-05-17T13:47:23.613 に答える