將事件處理程序附加到動態生成的元素

Question

我有以下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。 如果我按下按鈕rejectr1，它應該刪除div＃validation1。

生成元素時，處理程序不會附加到它們。

該代碼在onclick事件中執行時不起作用，但是當我在導航器控制台中執行時，它起作用了。

我嘗試在ID為#validation的div上使用DOMSubtreeModified，但是沒有用。

Answer 1

您可以通過在on函數的第二個參數中使用類（或其他元素）來管理它。

為此，請勿在添加事件中聲明事件偵聽器。

這是一個完整的工作示例：

 $("#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> 

希望能幫助到你