Jquery - событие Click не работает для динамически созданной кнопки

Мое требование - создать количество кнопок, равное счету json array. Мне удалось создать динамические кнопки в jQuery. Но метод в .ready функции jquery не вызван для действия click. Я пробовал искать в SO. Нашли несколько решений, но ничего не работало для меня. Я очень новичок в jquery. Пожалуйста, помогите...

мой код: 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>. &nbsp;
<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>

EDIT - Пример .on Код метода - Отдельный файл: WORKING - СПАСИБО LOT

<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>

Ответы

Ответ 1

Вы создаете кнопки динамически, из-за чего вам нужно вызвать их с помощью метода .live(), если вы используете jquery 1.7

но этот метод устарел (вы можете увидеть список всех устаревших методов здесь) в новой версии. если вы хотите использовать jquery 1.10 или выше, вам нужно вызвать свои кнопки таким образом:

$(document).on('click', 'selector', function(){ 
     // Your Code
});

Пример

Если ваш html-то вроде этого

<div id="btn-list">
    <div class="btn12">MyButton</div>
</div>

Вы можете написать свой jquery следующим образом

$(document).on('click', '#btn-list .btn12', function(){ 
     // Your Code
});

Ответ 2

Я предполагаю, что созданные вами кнопки еще не на странице, когда вы привязываете кнопку. Либо свяжите каждую кнопку в функции $.getJSON, либо используйте метод динамической привязки, например:

$('body').on('click', 'button', function() {
    ...
});

Обратите внимание, что вы, вероятно, не хотите делать это на теге body, но вместо этого оберните кнопки в другом div или что-то еще и назовите on на нем.

jQuery On Method

Ответ 3

простой и простой способ сделать это - использовать для события:

$('body').on('click','#element',function(){
    //somthing
});

но мы можем сказать, что это не лучший способ сделать это. Я предлагаю другой способ сделать это, это использовать метод clone() вместо использования динамического html. Напишите, например, html в файле:

<div id='div1'></div>

Теперь в теге script создайте клон этого div, тогда все свойства этого div будут следовать и с новым элементом. Например:

var dynamicDiv = jQuery('#div1').clone(true);

Теперь используйте элемент dynamicDiv, куда бы вы его ни добавили, или измените его свойства по своему усмотрению. Теперь все функции jQuery будут работать с этим элементом

Ответ 4

Вы также можете создать кнопку ввода таким образом:

var button = '<input type="button" id="questionButton" value='+variable+'> <br />';

Это может быть синтаксис создания Button, который каким-то образом отключен.