0

XMLシートから複数のテキストをインポートし、Jqueryを使用してその場でクリック可能なボタンを既存のhtmlページとdivに作成しています。

テキストとクリック可能なボタンは正常にインポートされているようです。ボタンはマウスのロールオーバーやクリック可能性などに反応します。

トラブルシューティングとして、html をコピーしてライブ ページから (同じ方法で xml からインポートした後) 直接同じ html ページに貼り付けたところ、期待どおりにボタンが完全に機能しました。これがxmlインポートで機能する、または機能しない方法について奇妙なことはありますか?

コードの xml シート ブロックからの完全な JQuery インポートを次に示します。

$(function(){    
        $('#hideText').click(function() {  
        $("#readingText").fadeOut(100);
        $("#viewText").fadeIn();
        $("#hideText").fadeOut();
        var qnum = 1;           

        $("#questions").empty();
            $.ajax({
                type: "GET",
            url: "mc1.xml",
            dataType: "xml",
            success: function(xml) {
                var quiz = "quiz"+qnum ++;
                $(xml).find(quiz).each(function(){
                var id = $(this).attr('id');
                var questionNo = $(this).find('questionNo').text();
                var q1 = $(this).find('q1').text();
                var A = $(this).find('A').text();

                $('<div class="items" id="link_'+id+'"> 
 </div>').html( '<p style="color:green">'+questionNo+  '</p>' + '<p style="color:red">'
 +q1+ '</p>' + '</p>').appendTo('#questions');
$(this).find('choice').each(function(){
var A = $(this).find('A').text();
var B = $(this).find('B').text();
var C = $(this).find('C').text();
var D = $(this).find('D').text();
var E = $(this).find('E').text();
 $('<div id = "AA" class="1" ></div>').html('<p class="tab2"> <a href="#" 
     class="q_but">A</a> '+A+' <br><br> ').appendTo('#link_'+id);
 $('<div id = "BB" class="2"></div>').html('<p class="tab2"> <a href="#"    
 class="q_but">B</a> '+B+' <br><br>').appendTo('#link_'+id);
 $('<div id = "CC" class="3"></div>').html('<p class="tab2"> <a href="#" 
 class="q_but">C</a> '+C+' <br><br>').appendTo('#link_'+id);
 $('<div id = "DD" class="4"></div>').html('<p class="tab2"> <a href="#" 
 class="q_but">D</a> '+D+' <br><br>').appendTo('#link_'+id);
 $('<div id = "EE" class="5"></div>').html('<p class="tab2"> <a href="#" 
 class="q_but">E</a> '+E+' <br><br>').appendTo('#link_'+id);
$("#questions").fadeIn(2000);           

                    });
                });
            }
        })
    });
});

インポートされたボタンが機能することをテストするためのテスト クリック関数を次に示します。

$(function(){    
        $('#AA').click(function() {  
        $("#questions").fadeOut();
        });
    })

助けてくれて本当にありがとうございます。

4

2 に答える 2

1

問題は、データが DOM にロードされ、単純なクリックで「AA」にアクセスできない場合に発生すると思います。

これを試してください。on()非推奨と同等ですlive()

$(function(){    
   $('#AA').on('click', function(){  
      $("#questions").fadeOut();
   });
});
于 2012-05-23T02:48:18.600 に答える
0

編集が承認されませんでした。ハハ。その.on()ため、イベント ハンドラーを親要素にアタッチし、クリックされた要素からイベントが発生するのを待ちます。.live()それは前身であり、イベントを要素に添付することで機能しましたbody。これは、イベントが実際に処理される前に非常に多くのバブリングを意味しました。

基本的には同じことを行っていますが、後で追加する要素のクラス名 (または任意の CSS セレクター) である追加のパラメーターを追加する点が異なります。

$(function(){    
   $('#link_1').on('click', '.q_but', function(){ 
      $("#questions").fadeOut();
   });
});

それもイベント#AA後に追加されたため、 に追加しても機能しませんでした。すべての要素にクラスがありました!document ready#link_1#link_x

（今回は指が交差しました！）

=)

于 2012-05-23T09:53:30.720 に答える