How to bind to 'sonata-collection-item-added' in sonata_type_collection fields?

[Ludescher Antal]

In sonata_type_collection fields the "Add new" button has no "sonata-collection-add" class therefore the following code is never executed:

jQuery(subject).on('click', '.sonata-collection-add', function(event) { ... }

sonata-collection-item-added is never triggered.
The documentation says:

A jQuery event is fired after a row has been added(sonata-collection-item-added)

How to bind to 'sonata-collection-item-added' in sonata_type_collection fields?

[Huy Vũ]

I would love to know too.

[Huy Vũ]

I has just found out an alternative method, using livequery. It works for me. Here is my code to display image

<script type="text/javascript" src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.livequery-1.1.1/jquery.livequery-min.js"></script>

<script type="text/javascript">   

        $(function(){

            

            $("#field_container_{{ admin.uniqId }}_images").livequery(function() {

                image_preview();

            });

        });

</script>

[Ludescher Antal]

Nice idea!
Wouldn't this also fire on every other event (when removing lines) ? I think an event check should be added to be on the safe side:
$("#field_container_{{ admin.uniqId }}_images").livequery(function(event) {
                if('event' == '_some_event_name_')
                image_preview();
            });

Another solution could be to add the sonata-collection-add class name to the button, but I don't know how to do that elegantly.

[Huy Vũ]

Why you don't use jquery addClass? Something like:

$(".sonata-ba-action").addClass("sonata-collection-add");

If you have more than one button, check their parents to add to the right one:

$("#field_actions_{{admin.uniqId}}_images > a.sonata-ba-action").addClass("sonata-collection-add");