Wert der dynamisch hinzugefügte Schaltfläche

Question

Ich erstelle eine einfache Fragebogenanwendung.

Meine aktuelle Funktion ruft die Optionen jeder Frage ab und hängt sie als Schaltflächen an. Ich würde gerne eine andere Funktion programmieren prefixefornextquestion, um den Wert der ausgewählten Schaltfläche zu alarmieren. Der aktuelle scheint nicht den Wert des jeweiligen Klicks zu erhalten. :(

$('#option_one').append("<button data-role='button' class='option' data-inline='true' data-mini='true' data-theme='b' onclick='preparefornextquestion()' value='" + arr[0].option_one + "'>" + arr[0].option_one + "</button>").trigger('create'); 
 

 
$('#option_two').append("<button data-role='button' class='option' data-inline='true' data-mini='true' data-theme='b' onclick='preparefornextquestion()' value='" + arr[0].option_two + "'>" + arr[0].option_two + "</button>").trigger('create'); 
 

 
$('#option_three').append("<button data-role='button' class='option' data-inline='true' data-mini='true' data-theme='b' onclick='preparefornextquestion()' value='" + arr[0].option_three + "'>" + arr[0].option_three + "</button>").trigger('create'); 
 

 
function preparefornextquestion(){ 
 
    $(document).ready(function() { 
 
     $('.option').click(function() { 
 
      alert($(this).attr("value")); 
 
     }); 
 
    }); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="option_one"></div> \t \t \t \t \t 
 
<div id="option_two"></div> \t 
 
<div id="option_three"></div>

Answer 1

$('#option_one').append("<button data-role='button' class='option' data-inline='true' data-mini='true' data-theme='b' onclick='preparefornextquestion(this)' value='" + arr[0].option_one + "'>" + arr[0].option_one + "</button>").trigger('create'); 

$('#option_two').append("<button data-role='button' class='option' data-inline='true' data-mini='true' data-theme='b' onclick='preparefornextquestion(this)' value='" + arr[0].option_two + "'>" + arr[0].option_two + "</button>").trigger('create'); 

$('#option_three').append("<button data-role='button' class='option' data-inline='true' data-mini='true' data-theme='b' onclick='preparefornextquestion(this)' value='" + arr[0].option_three + "'>" + arr[0].option_three + "</button>").trigger('create'); 


function preparefornextquestion(val){ 
alert($(val).attr('value')) 
} 

Answer 2

Hier ist mein Fiddle mit dieser versuche ich arr Wert ich nicht nehmen so nur einen beliebigen Wert.

JSFiddle

HTML Code -

<div id="option_one"></div> 
<div id="option_two"></div> 
<div id="option_three"></div> 

JavaScript-Code -

$('#option_one').append("<button data-role='button' class='option' data-inline='true' data-mini='true' data-theme='b' value='" + 1 + "'>" + 1 + "</button>"); 

$('#option_two').append("<button data-role='button' class='option' data-inline='true' data-mini='true' data-theme='b' value='" + 2 + "'>" + 2 + "</button>"); 

$('#option_three').append("<button data-role='button' class='option' data-inline='true' data-mini='true' data-theme='b' value='" + 3 + "'>" + 3 + "</button>"); 

$('body').on('click','.option',function(){ 
    alert($(this).val()); 
});