JQuery: adding events to new HTML elements

[bosoxbill]

I am working with Advanced Custom Fields in Wordpress and trying to get some of the input fields to total in another field when certain fields lose focus.

 

I can get this to work when the page is loaded and the fields are already on the page. However, there is a "button" (technically not a button, but this:

<ul class="acf-hl">
<li class="acf-fr">
<a href="#" class="acf-button blue" data-event="add-row">Add Row</a>
</li>
</ul>

 

) that when pressed will add rows with new input fields. The script will not work unless I save the page. Is there a way for a script to include any newly added elements to a web page?

 

Here is my code:

jQuery(document).ready(function($) {

$("div[data-name='away_players'] tr.acf-row").each(function(){
var z = $(this).find('input');
z.blur(function(){
z[3].value = (2 * parseInt(z[0].value)) + (3 * parseInt(z[1].value)) + parseInt(z[2].value);
})(jQuery); 

I've included a screen shot. When the light blue inputs lose focus they get summed and the total goes in the red input for each row. Here is the screen shot:

 

[dsonesuk]

IF you are saying that jquery event is triggered on current elements, but not on newly created elements, then you need to use .on(), its selector targets a parent element that is always present, it will run code on newly created row of child elements within this parent.

[bosoxbill]

I got it to work with your suggestion and I can't thank you enough!