jquery - 单击事件不适用于动态创建的按钮

Question

jquery - 单击事件不适用于动态创建的按钮

我的要求是创建等于json数组计数的按钮数.我成功地在jquery中动态创建按钮.但是没有为点击操作调用jquery的.ready函数中的方法.我试过在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>

Run Code Online (Sandbox Code Playgroud)

编辑 - 示例.on方法代码 - 单独的文件:工作 - 感谢很多

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Maj*_*adi 151

您可以动态创建按钮,因为.live()如果使用jquery 1.7,则需要使用方法调用它们

但是不推荐使用此方法(您可以在此处看到所有已弃用的方法的列表).如果你想使用jquery 1.10或更高版本,你需要以这种方式调用你的按钮:

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

Run Code Online (Sandbox Code Playgroud)

例如

如果您的HTML是这样的

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

Run Code Online (Sandbox Code Playgroud)

你可以像这样写你的jquery

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

Run Code Online (Sandbox Code Playgroud)

这种方法太棒了.它使用文档对象并查找那里的任何按钮,无论是旧的还是新的(动态创建的). (3认同)

Answer 2

小智 5

我的猜测是,在您绑定按钮时,您创建的按钮尚未出现在页面上.绑定$.getJSON函数中的每个按钮,或使用动态绑定方法,如:

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

Run Code Online (Sandbox Code Playgroud)

请注意,您可能不希望在"body"标记上执行此操作,而是将按钮包装在另一个div或其他内容中并调用on它.

jQuery On Method

归档时间：	11 年，10 月前
查看次数：	93231 次
最近记录：	9 年，2 月前