Form submit inside each loop not working after triggering button being dynamically created

Question

I have a couple of forms that each contain a submit button.

Html example:


    
        
            
            
            
                
                    
                
            

            
                
                    Hoe lever je jouw ontwerp aan?
                    
                        
                        Test
                    
                
                
                    
                        
                    
                    of
                    
                        
                    
                
            
            
        
    
    
        
            
            
            
                
                    
                
            

            
                
                    Hoe lever je jouw ontwerp aan?
                    
                        
                        Test
                    
                
                
                    
                        
                    
                    of

I submit every form like this:

$( ".uploadbtn" ).each(function() {
    var form = $(this).closest('.productblock').find('.editorform');
    $(this).click(function() {
        form.submit();
    });
});

This used to work, but now I changed it so that the button that triggers the form submit is generated dynamically (at the moment every 2 seconds). And now the button won't submit anymore.

This is the code that "refreshes" all submit buttons:

// Function below executes every 2 seconds
var editorcheck = function() {
    // Post order id to editorcheck.php
    order_id = $('.order_id_input').val();
    $.ajax({
        type:'post',
        url:"payprocess/editorcheck.php",
        data:({order_id: order_id}),
        success:function(data){
            var obj = JSON.parse(data);
            // Loop json result from editorcheck.php
            for (var i = 0; i < obj.length; i++) {
                var status = obj[i].edit_status;
                var orderline = obj[i].orderline;
                // Loop all elements with class .orderlineloop
                $(".orderlineloop").each(function(i) {
                    // If the returned status == finished
                    if(obj[i].edit_status == 'finished'){
                        if($(this).find('.orderline_id_input').val() == obj[i].orderline){
                            $(this).find('.productblockbottom').empty().append('Je ontwerp is ontvangen   ');
                        }
                    }else if(obj[i].edit_status == 'unfinished'){
                        // Else if status == unfinished
                        $(this).find('.productblockbottom').empty().append('Hoe lever je jouw ontwerp aan?  Test'
                        +''
                        +''
                        +'of'
                        +''
                        +'');
                    }
                });
            }
        }
    });
};
var interval = 2000;
setInterval(editorcheck, interval);

This is the part where the buttons get replaced:

}else if(obj[i].edit_status == 'unfinished'){
    // Else if status == unfinished
    $(this).find('.productblockbottom').empty().append('Hoe lever je jouw ontwerp aan?  Test'
    +''
    +''
    +'of'
    +''
    +'');
}

I was thinking that my each loop can't find the buttons anymore since they have been replaced/dynamically created. So I looked for something like .on() for the each function, but I see that doesn't exist.

So I tried starting from an element higher in the DOM hierarchy, one that doesn't get replaced and from there find the button like this:

$( "body .uploadbtn" ).each(function() {
    var form = $(this).closest('.productblock').find('.editorform');
    $(this).click(function() {
        form.submit();
    });
});

But this also doesn't work. What can I do?

I also tried not putting the trigger on uploadbtn but on an element that never refreshes and from there select the uploadbtn:

$( ".orderlineloop" ).each(function() {
    var submitbutton = $(this).find('.uploadbtn');
    var form = $(this).find('.editorform');
    $(submitbutton).click(function() {
        form.submit();
    });
});

But again this doesn't work. I can only submit the button once if I click fast (before the function replaces the button).

user_8202589 · Answer

For dynamically added elements you need to use event delegation with the .on() method, so you were on the right track.

This should work for you:

$(document).on('click', '.uploadbtn', function () {                
   var form = $(this).closest('.productblockbottom').siblings('.refreshform').find('.editorform');
   form.submit();
});

Edit: Added OP solution for finding the form element from comment below.

Form submit inside each loop not working after triggering button being dynamically created

1 Answers