Question

我正在从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();
        });
    })

非常感谢你的帮助。

Answer 1

我认为问题出现在数据加载到DOM中并且您无法访问“AA＆＃39;使用简单的点击。

试试这个，on()相当于弃用的live()

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

Answer 2

抱歉，我的编辑未获批准！哈哈。因此.on()的工作方式是将事件处理程序附加到父元素，并等待事件从单击的元素冒泡。 .live()是它的前身，并通过将事件附加到body元素来工作 - 这意味着在事件实际处理之前发生了大量的冒泡。

基本上，我们正在做同样的事情，除了我们添加一个额外的参数，这个元素的类名（或任何CSS选择器）将在以后添加！

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

将其添加到#AA不起作用，因为在document ready事件之后也添加了 - 所以现在我放入#link_1 - 您需要更改此内容每个ID - 尽管如果所有#link_x元素都有一个类，这会更好（并且你的代码会更整洁）！

（这次手指交叉了！）

=）

使用JQuery从XML导出文本和创建按钮

2 个答案: