jquery dynamic click event

Question

Some code of mine uses jquery to create elements <a> with a function given for click behavior:

$(alternatives).each(function (idx, elt) {
  var element = $('<span class="label label-success">');
  var link = $('<a class="prop' + idx + '" title="' + elt + '">' + elt + '</a>');
  link.click(switchLabel);
  element.append(link);
  list.append(element);
});

The idea here is to catch the click event on the <a class="prop1-0" title="myTitle">my link</a> to change the text in a <span id="corr1-0">my old text</span>. The link between both element is made by the class suffix, f.i. 1-0.

I have several pairs <a>/<span>, I checked every id.

Some links work, but some do not: no error in console, nothing to trace with firebug...

The function binded is :

function switchLabel(e) {
  $('#corr'+ e.target.className.substr(4)).text($(e.target).attr('title'));
}

Do you have some tips to help me track this unwanted behavior? May I make a mistake in the implementation?

Regards

first of all you are using the variable index and idx, is that right? — Hoffmann
– Hoffmann, Commented May 13, 2013 at 15:32

adeneo · Accepted Answer · 2013-05-13 15:33:15Z

4

Your variables don't match, you are using index and not idx etc. and there are easier ways to create elements and event handlers ?

$.each(alternatives, function (idx, elt) {
    var element = $('<span />', {'class' : 'label label-success',
                                 id      : 'corr'+idx
                                }
        ),
        link    = $('<a />' {id    : 'prop' + idx, 
                             title : elt, 
                             text  : elt
                            }
        );
    link.on('click', function() {
        $('#' + this.id.replace('prop','corr')).text(this.title);
    });
    list.append( element.append(link) );
});

answered May 13, 2013 at 15:33

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

enguerran Over a year ago

Thanks a lot for sharing. I did not know this syntax and after a quick look, it seems much more stable. Why? Is my code wrong or is a framework matter?

enguerran Over a year ago

This code creates a link in a bootstrap popover element. This element, created and displayed/hidden by bootstrap code, does not handle correctly because at first call, the click event is launched, while in the other calls (after a cycle hidden/shown back), it is not...

Collectives™ on Stack Overflow

jquery dynamic click event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related