如何使用 jquery 从动态创建的 html 对象中检索数据

Question

我有一个网络项目，我将一些带有创建的 html 代码的问题注入到 html 页面中。由于这些 html 对象是动态创建的，我不知道会有多少问题以及它们的 ID。我需要得到选定的答案。

这里有一段动态创建的html代码和一些带有JSFiddle演示的javascript函数。我尝试获取所选答案的 nextPage 功能不起作用。

function nextPage() {
var results = new Array();
var contents = $(this).parents("div").parents("div").find("input");
contents.filter(":checked").each(function () {
    var idx = $(this).index();
    results.push($(this).parent().children().get(idx + 1).innerHTML);
    alert($(this).parent().children().get(idx + 1).innerHTML);
});
contents.filter(":text").each(function () {
    results.push($(this).val());
});

alert(results.join(";"));
pageNumber += 1;
window.location = '#question' + pageNumber;
}

JSFiddle Demo

如何获得选定的答案？任何帮助将不胜感激。

Answer 1

尝试以下（您正在寻找的内容）：

 var pageNumber = 1, isLastPage = 2, results = [];

function nextPage() {

  var contents = $('#question' + pageNumber).find(".answers");    

  contents.filter(":checked").each(function () {        
    var text = $(this).next().find("span.ui-btn-text").text();
     if( text == undefined || text == ""){
         text = $(this).parent().next().text();
     }
    results.push(text);       
  });

   pageNumber += 1;

  if(pageNumber > isLastPage){
     alert("Test Finished, all answers are : " + results.join(";"));
     return;   
  }
   window.location = '#question' + pageNumber;
}

function prevPage() {
   pageNumber -= 1;
   window.location = '#question' + pageNumber;
}

在这里工作小提琴：http://jsfiddle.net/REthD/5/

希望对你有帮助。

Answer 2

我已将@maverickosama92 解决方案更新为更简单的方法，看看这是否是您所需要的。

在这里工作http://jsfiddle.net/REthD/7/

更简单的方法：

var pageNumber = 1, isLastPage = 2, results = [];

function Responses()
{
    var jqResponses = $('body').find(":checked");
    var arrResponses = [];
    jqResponses.each(function(){
        arrResponses.push($('label[for*="' + this.id + '"]').text());
    })

    alert('Responses: ' + arrResponses.join(";"))
}

function nextPage() {

    pageNumber += 1;

    if(pageNumber > isLastPage){
        Responses();    
        return;   
    }
    window.location = '#question' + pageNumber;
}

function prevPage() {
    pageNumber -= 1;
    window.location = '#question' + pageNumber;
}

Answer 3

由于您没有使用 jquery 创建单击事件，因此您的 $(this) 没有获取按钮元素，而是获取了窗口对象。然后将窗口对象传递给 jquery。

this 在从 onclick 调用时在函数中的值 event 将是对全局（窗口）对象的引用。 (see link)

您可以通过使用 jquery 添加点击事件并从 html 中删除 onclick="nextPage()" 来解决此问题。与此类似的东西（当然，您应该只将其应用于“下一步按钮”）：

$('input[type=button]').bind('click',nextPage);

或者您可以继续在 html 中使用您的 onclick="nextPage()" 并且您可以像这样获得点击按钮：

var $clickedButton = $(this.event.target);

所以你的功能是：

function nextPage() {

    var results = new Array();
    var contents = $(this.event.target).parents("div").parents("div").find("input");
    contents.filter(":checked").each(function () {
        var idx = $(this).index();
        results.push($(this).parent().children().get(idx + 1).innerHTML);
        alert($(this).parent().children().get(idx + 1).innerHTML);
    });
    contents.filter(":text").each(function () {
        results.push($(this).val());
    });

    alert(results.join(";"));
    pageNumber += 1;
    window.location = '#question' + pageNumber;
}

NEW JSFiddle updated demo

我对 jquery mobile 了解不多。而且我不知道将事件放在 html 上是否是绑定点击事件的最佳方式，但我想使用 jquery 绑定点击事件会更好。

JSFiddle binding events with jquery