时间戳

首页 > 解决方案 > 将事件处理程序附加到动态生成的元素

javascript - 将事件处理程序附加到动态生成的元素

问题描述

我有以下 HTML：

<button type="button" id="Button">Go</button>
<div id="validation"></div>

我正在尝试通过以下方式将事件处理程序添加到动态生成的元素中：

单击按钮 -> 在 div #validation 中生成元素 X -> 将事件处理程序附加到元素 X

$(document).ready(function(){
    ID = 1;

    $("#Button").click(function(){

        /*generate new div inside div #validation with id #validationID
        1st one would be #validation1
        it contains a form with name accepterID and a button with name refuserID
        1st ones would be accepter1 and refuser1*/
        var newline = `
                    <div id="validation${ID}">
                        <form name="accepter${ID}">
                            <input type="hidden" name="name" value="phoegasus">
                            <button type="submit" value="valider">
                        </form>
                        <button name="refuser${ID}">refuser</button>
                    </div>
                    `
        $("#validation").append(newline);

        /*attach event handlers to the generated elements
        1st iteration would attach handlers to accepter1 and refuser1 */

        $("#validation").on('submit',"form[name^='accepter"+ID+"']",function(e){
            $("#validation" + ID).remove();
            //remove div validationID after submitting form
        });

        $("#validation").on('click',"button[name^='refuser"+ID+"']",function(){
            $("#validation" + ID).remove();
            //remove div validationID
        });

        ID++;

    });
});

当我提交表单或单击生成的按钮时，我想删除包含它们的 div。如果我按下按钮拒绝 1，它应该删除 div #validation1。

生成元素时，处理程序不会附加到它们。

该代码在 onclick 事件期间执行时不起作用，但是当我在导航器控制台中执行它时它起作用。

我尝试在 ID 为 #validation 的 div 上使用 DOMSubtreeModified，但没有成功。

标签： javascriptjquery

解决方案

您可以通过在on函数的第二个参数中使用类（或另一个元素）来管理它。

为此，请勿在 add 事件中声明事件侦听器。

这是一个完整的工作示例：

$("#validation").on('submit',"form.validation-form",function(e){
  e.preventDefault();
  console.log('form', $(this).attr('data-id'), ' submitted');
});



$("#validation").on('click',"button.validation-refuser",function(){
  console.log('clicked on refuser for form ', $(this).attr('data-value'));
    //code
});

var ID = 1;
$('#my-adder').on('click', function () {
  $('#validation').append('<form name="accepter'+ID+'" class="validation-form" data-id="'+ID+'"><input type="text" placeholder="my text field" /><button class="validation-refuser" name="refuser'+ID+'" data-value="'+ID+'">Refuser button</button><button type="submit">SUBMIT</button></form>');
  ID++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="validation">
  <form name="accepter0" class="validation-form" data-id="0">
    <input type="text" placeholder="my text field" />
    <button type="button" class="validation-refuser" name="refuser0" data-value="0">Refuser button</button>
    <button type="submit">SUBMIT</button>
  </form>
</div>

<button id="my-adder">ADD A FORM</button>

希望能帮助到你

推荐阅读