Question

我从 xml 工作表导入多个文本, 并使用 Jquery 将可点击的按钮创建到已有的 html 页面和 div 上。

文本和可点击的按钮似乎可以导入正常, 按钮对鼠标滚动、可点击性等反应 - 所有功能似乎都存在 - 但我. 点击. html 页面中的脚本功能不起作用。

As a troubleshoot, I copied the html and paste directly from a live page (after importing from xml using the same method) into the same html page, and the button works perfectly - as you would expect. Is there something weird about the way this does or doesn t work with an xml import?

这是从 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();
        });
    })

非常感谢你的帮助。

Answer 1

我认为当数据装入DOM时,问题就会出现,而您无法使用简单的点击访问 AA 。

试一下, on () 等于已折旧 live ()

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

Answer 2

Sorry, my edit didn t get approved! haha. So the way .on() works, is that you attach the event handler to the parent element, and it waits for the event to bubble up from the element that was clicked. .live() was it s predecessor, and worked by attaching the events to the body element - which meant an awful lot of bubbling before the event actually got handled.

基本上,我们在做同样的事情, 除了我们再添加一个额外的参数, 也就是元素的类名( 或任何 CSS 选择器), 稍后将添加元素的类名( 或任何 CSS 选择器 )!

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

将它添加到没有工作, 因为此功能也是在 document 准备 事件后添加的 - 所以现在我把 - 您需要为每个 ID 修改此功能 - 不过, 如果所有元素都有一个类的话, 这将更好( 您的代码会更干净 )!

(鞭炮越过它这次起作用了! )

=) =

友情链接