obtiene - jquery: el evento Click no funciona para el botón creado dinámicamente
onclick jquery (4)
Esta pregunta ya tiene una respuesta aquí:
- ¿Enlace de eventos a elementos creados dinámicamente? 23 respuestas
Mi requisito es crear una cantidad de botones igual al recuento de json array. Logré crear botones dinámicamente en jquery. Pero el método que ya está en función de jquery no se llama para la acción de clic. He intentado buscar en SO. Encontré algunas soluciones, pero nada funcionó para mí. Soy muy nuevo en jquery. Por favor ayuda...
mi código: jQuery:
$(document).ready(function()
{
currentQuestionNo = 0;
var questionsArray;
$.getJSON(''http://localhost/Sample/JsonCreation.php'', function(data)
{
questionsArray = data;
variable = 1;
//CREATE QUESTION BUTTONS DYNAMICALLY ** NOT WORKING
for (var question in questionsArray)
{
var button = $("<input>").attr("type", "button").attr("id", "questionButton").val(variable);
$(''body'').append(button);
//Tried using .next here - but it dint work...
//$(''body'').append(''<button id="questionButton">'' + variable + ''</button>'');
variable++;
}
displayQuestionJS(questionsArray[currentQuestionNo], document);
});
$("button").click(function()
{
if ($(this).attr(''id'') == "nextQuestion")
{
currentQuestionNo = ++currentQuestionNo;
}
else if ($(this).attr(''id'') == "previousQuestion")
{
currentQuestionNo = --currentQuestionNo;
}
displayQuestionJS(questionsArray[currentQuestionNo], document);
});
function displayQuestionJS(currentQuestion, document)
{
document.getElementById(''questionNumber'').innerText = currentQuestion.questionNumber;
document.getElementById(''questionDescription'').innerText = currentQuestion.quesDesc;
$(''label[for=optionA]'').html(currentQuestion.optionA);
$(''label[for=optionB]'').html(currentQuestion.optionB);
$(''label[for=optionC]'').html(currentQuestion.optionC);
}
HTML content
<form method="post" name="formRadio">
<label id="questionNumber"></label>.
<label id="questionDescription"></label> <br />
<input type="radio" id="optionA"> </input> <label for="optionA"></label> <br />
<input type="radio" id="optionB"> </input> <label for="optionB"></label> <br />
<input type="radio" id="optionC"> </input> <label for="optionC"></label> <br />
<button id="previousQuestion">Previous Question</button>
<button id="nextQuestion">Next Question</button>
<br />
<br />
<input type="submit" id="submitButton" name="submitTest" value="Submit"></input>
</form>
EDITAR - Sample .on Código de método - Archivo separado: WORKING - GRACIAS MUCHO
<script>
$(document).ready(function()
{
$("button").click(function()
{
var button = ''<input type="button" id="button2" value="dynamic button">'';
$(''body'').append(button);
});
});
$(document).on(''click'',''#button2'', function()
{
alert("Dynamic button action");
});
</script>
</head>
<body>
<button id="button">Static Button</button>
</body>
Supongo que los botones que ha creado aún no están en la página cuando se vincula el botón. O bien enlace cada botón en la función $.getJSON , o use un método de enlace dinámico como:
$(''body'').on(''click'', ''button'', function() {
...
});
Tenga en cuenta que probablemente no desee hacer esto en la etiqueta ''cuerpo'', sino que en lugar de eso, ajuste los botones en otro div o algo así y llámelo.
También puede crear el botón de entrada de esta manera:
var button = ''<input type="button" id="questionButton" value=''+variable+''> <br />'';
Podría ser la sintaxis de la creación del botón que está desactivada de alguna manera.
Usted crea botones dinámicamente porque necesita llamarlos con el método .live() si usa jquery 1.7
pero este método está en desuso (puede ver la lista de todos los métodos en desuso here ) en una versión más nueva. si quiere usar jquery 1.10 o superior, necesita llamar a sus botones de esta manera:
$(document).on(''click'', ''selector'', function(){
// Your Code
});
Por ejemplo
Si tu html es algo como esto
<div id="btn-list">
<div class="btn12">MyButton</div>
</div>
Puedes escribir tu jquery como este
$(document).on(''click'', ''#btn-list .btn12'', function(){
// Your Code
});
la manera simple y fácil de hacerlo es usar en el evento:
$(''body'').on(''click'',''#element'',function(){
//somthing
});
pero podemos decir que esta no es la mejor manera de hacer esto. Sugiero otra forma de hacerlo es utilizar el método clone () en lugar de usar html dinámico. Escriba algunos html en su archivo, por ejemplo:
<div id=''div1''></div>
Ahora, en la etiqueta del script, haga una clonación de este div, entonces todas las propiedades de este div seguirían también con un nuevo elemento. Por ejemplo:
var dynamicDiv = jQuery(''#div1'').clone(true);
Ahora usa el elemento dynamicDiv donde quieras agregarlo o cambiar sus propiedades como desees. Ahora todas las funciones de jQuery funcionarán con este elemento