How to add custom Js code in a "dynamic-rows" component?

Question

I'm creating a module that uses a dynamic-rows component similar to the one used for advanced pricing in the product add/edit form.

I need to add some custom javascript code when the new row is added to the list of existing rows (Add button is clicked).

A simple alert('Good Job!') should do it. I can take it from there.
I don't want to bore you with my custom code because that's not important for now.
So I am asking...

How can I add a js alert when pressing the add button?
I don't mind if your recommendations suggest a core edit. I know how to adapt it to my own module (I think).
I just need a place to start.

[Edit].
I realized I didn't add any code.
The code for the advanced pricing dynamic rows can be found here

Answer 1

First, we decided to use events that can be activated on a button hit. However, nothing happened when we added a child. We checked this by adding the event console.log() class to the static: pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/core/events.js

 /**
 * Calls callback when name event is triggered.
 * @param {String} events
 * @param {Function} callback
 * @return {Object} reference to this
 */
 on: function (events, callback, ns) {
 var iterator;
 if (arguments.length < 2) {
 ns = callback;
 }
 console.log('events: ');
 console.log(events);
 iterator = addHandler.bind(null, this, ns);
 _.isObject(events) ?
 _.each(events, iterator) :
 iterator(callback, events);
 return this;
 },

and added a log to the processingAddChild dynamic-rows method: pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/dynamic-rows/dynamic-rows-grid.js

 processingAddChild: function (ctx, index, prop) {
 console.log('processingAddChild fire');
 if (this._elems.length > this.pageSize) {
 return false;
 }
 this.showSpinner(true);
 this.addChild(ctx, index, prop);
 console.log('processingAddChild END\'S');
 },

The result: enter image description here

Some additional options that you may think of:

1. Replace this button for your own with a js-component expanding this button. Hence, you'll get full control over it.
2. Use simple events like click for home-elements (probably, not the best decision).
3. Replace a js-component for a dynamic row for your own and add the code you need at the beginning of the processingAddChild method processing and then call the parent method (this._super()).

The first and third options look like the best solution if you need to add your own elements and not to modify the existing Magento code.

• Marius: Duh! Of course that was the solution. Extending the dynamic rows component. Thank you. Just for the record, I decided to change the function addChild instead of processingAddChild because I need to do something right after a child row is added. This also solves my next question of how I can add code when a row is deleted. Thank you again.
• kolucciy: Hi @marius, can you provide some instructions on how you extended the dynamic rows component?
• Ranganathan: Is there any option to manage dynamic rows in product adding section with store view scope?
• Jafar Pinjar: @Marius, how can we limit dynamic rows to 10 rows maximum? just need to show error message if rows are more than 10