Cannot attach new event handler to Add/Delete links

[JarnoRFB]

I have a template with multiple formsets in formset_list, which I render like this

<script type="text/javascript" charset="utf8"  src="{% static 'projectname/jQuery.formset.js' %}"></script>
<script type="text/javascript">
  {% for formset in formset_list %}  
    $(function() {
        $('.form-container{{ forloop.counter }}').formset({
          prefix: '{{ formset.prefix }}',
          formCssClass: 'dynamic-formset{{ forloop.counter }}',
          addCssClass: 'add-row{{ forloop.counter }}',
          deleteCssClass: 'delete-row{{ forloop.counter }}',
        });
    });    
  {% endfor %}
</script>

then I include another script, in which I would like to attach a new click event handler to the Add/Delete links.

$( 'body' ).on( 'click', 'a', function() {
    console.log('link clicked');
});

Attaching it to all links would already work for me, since Add/Delete links are the only links on the page. However, the event is never attached or never bubbles up to the body, this is not the case with links I hardcode into the template. My solution for now was to put my desired functionality directly, in jQuery.formset.js, when the click event handler is attached, but I would like to separate this more cleanly and to understand why adding new event handlers seems to be blocked somehow.

[elo80ka]

Hi @JarnoRFB,

The $(...).on(...) syntax uses event delegation, which, I believe, depends on event bubbling. Since the event handlers for the Add/Delete links are attached directly to the links, I don't expect the click to bubble up to your body element, so your event handlers shouldn't ever get called. If you have custom code you'd like to run when a form is added or removed, you can pass callbacks for the added and removed keys in the plugin settings (you probably already know this).

That said, having the link events work this way sounds like a reasonable request. I'd be interested in investigating it some more, if you've got some time.

Cheers.

[JarnoRFB]

Hi @elo80ka,

first thanks for pointing me to the added and removed settings. This is indeed a lot cleaner than placing the function somewhere in the code.

Now for the original problem: What exactly do you mean by "the event handlers for the Add/Delete links are attached directly to the links"? I thought that the event handlers would be attached via row.find('a.' + delCssSelector).click(function() {...} which would be equivalent to row.find('a.' + delCssSelector).on('click', function() {...}. Shouldn't this show the same behaviour as any click event attached to a link?

[elo80ka]

@JarnoRFB when you use the $(..).click(...) or find(...).click(...) syntax, the event handler gets assigned to the elements matching the selector - that's what I meant. Event delegation does something different (usually, attaching a single event handler to the parent of the elements concerned). As a result, they can sometimes have somewhat differing behaviour.

[sudaykjha]

How can we call a function when removing a link? Is it like this -

[elo80ka]

Hi Sudaykja,

You're pretty close. Try this instead:

Notice I've removed the quotes and the parentheses from "auto_calculate" - you were passing a string ('auto_calculate();') when you should be passing a function instance. I've also moved the code to inside the "$(document).ready(...)", which is probably what you wanted.

Cheers.

On Tue, Sep 25, 2018 at 6:16 PM sudaykja notifications@github.com wrote:

How can we call a function when removing a link? Is it like this -

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/elo80ka/django-dynamic-formset/issues/110#issuecomment-424426036, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHoMaaOxRon_Z2qTOa3beJbPTEh9tY2ks5uemTqgaJpZM4IgIpQ .

-- When you don’t create things, you become defined by your tastes, rather than ability. Your tastes only narrow and exclude people. So create. -- Why

[sudaykjha]

Hi elo80ka ,

Thank You so much. Its working wonderfully now. This formset is really great. You are a legend. Really grateful for your prompt response. Many thanks again.

Cheers.