0

我正在从 xml 工作表中导入多个文本，并使用 Jquery 在现有的 html 页面和 div 中动态创建可点击按钮。

文本和可点击按钮似乎导入正常，按钮对鼠标悬停、可点击性等做出反应——所有功能似乎都在那里——但我在 .html 页面中的 .click 函数中的脚本不起作用。

作为故障排除，我将 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- 你需要为每个 ID 更改它 - 虽然，如果这样做会更好（并且你的代码会更整洁）所有的#link_x元素都有一个类！

（手指交叉这次它有效！）

=)

于 2012-05-23T09:53:30.720 回答