Как получить данные с jquery из динамически создаваемых объектов html

Question

У меня есть веб-проект, в который я вставляю некоторый вопрос с созданным html-кодом на страницу html. Поскольку этот объект html создается динамически, я не знаю, сколько вопросов будет и каковы будут их идентификаторы. Мне нужно получить выбранные ответы.

Здесь есть фрагмент кода html, созданный динамически, и некоторые функции javascript с демонстрацией JSFiddle. Функция 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 до более простого подхода, посмотри, действительно ли это то, что вам нужно.

Рабочая Fiddle Здесь http://jsfiddle.net/REthD/7/

Simpler подход:

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, ваш $ (это) не получает элемент кнопки, он получает объект окна , Затем вы передаете объект window в jquery.

Значение этого внутри функции, когда вызывается из OnClick случае будет ссылка на глобальный (окно) объекта. (see link)

Вы можете решить либо добавлять свои события с помощью щелчка JQuery и удалить OnClick = "СледующаяСтраница()" от HTML. Что-то похожее на это (конечно, что вы должны применять его только в «следующих кнопок»):

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

Или вы можете продолжать использовать ваш OnClick = «СледующаяСтраница()» внутри HTML, и вы можете получить нажал кнопку, как это:

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 лучшим способом связать событие click, но я думаю, что было бы лучше связать события click с помощью jquery.

JSFiddle binding events with jquery