关于html：jquery – Click事件不适用于动态创建的按钮


jquery - Click event not working for dynamically created button

本问题已经有最佳答案，请猛点这里访问。

我的要求是创建与JSON数组计数相等的按钮数。我在jquery中成功地动态创建了按钮。但对于click操作，jquery的.ready函数中的方法没有被调用。我试过这样搜索。找不到解决办法，但对我没什么作用。我对jquery很陌生。请帮助…

我的代码：jQuery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
$(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>

编辑——示例。关于方法代码——单独的文件：工作——非常感谢。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(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");
});


</head>

<body>

<button id="button">Static Button</button>

</body>
相关讨论

如果使用jquery 1.7，则需要使用.live()方法动态创建按钮

但此方法在较新版本中已被弃用(您可以在此处查看所有弃用方法的列表)。如果要使用jquery 1.10或更高版本，则需要以这种方式调用按钮：

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

例如

如果你的HTML是这样的

1
    MyButton

您可以这样编写jquery

1
2
3
$(document).on('click', '#btn-list .btn12', function(){
     // Your Code
});
相关讨论

我猜您创建的按钮在您绑定按钮时还没有出现在页面上。要么绑定$.getJSON函数中的每个按钮，要么使用动态绑定方法，如：

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

注意，您可能不想在"body"标签上这样做，而是将按钮包装在另一个DIV或其他地方，并在上面调用on。

方法jquery

简单易行的方法是在事件上使用：

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

但我们可以说这不是最好的方法。我建议另一种方法是使用clone()方法，而不是使用动态HTML。在文件中编写一些HTML，例如：

1
 

现在，在脚本标记中，克隆这个DIV，然后这个DIV的所有属性也将跟在新元素后面。例如：

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

现在，无论您想在哪里添加元素dynamicdiv，或者根据需要更改其属性，都可以使用它。现在所有jquery函数都将使用这个元素

您也可以这样创建输入按钮：

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

它可能是关闭按钮创建的语法。

相关讨论