How to set onclick event with JQuery?

Question

I am writing a popup on map pin click, where the user clicks on a link which initiates a function call. Here's the call that creates the pin

new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .setPopup(new mapboxgl.Popup({offset: 25}) // add popups
                .setHTML(popup(marker.properties)))
            .addTo(map);

And here's the popup function

function popup(properties) {
    return '<div>' +
        '<h3>' + properties.partnerName + '</h3>' +
        '<a onclick="mapPinSelect()">' + 'Link' + '</a>' +
        '</div>';
}

Everything works fine, but when I convert my popup method to JQuery, my onClick method stops working. Here's the JQuery version

function popup(properties) {
    return $('<div>')
            .append($('<h3>').append(properties.partnerName))
            .append($('<a>').click(mapPinSelect).append('Link'))
            .html()
}

What am I doing wrong?

You are not attaching your click handler to the link, but to the div. Like all chaining methods, `.append` still returns the jQuery object you called it _on_, not the element you just appended. — 04FS, Jun 28 '19 at 08:57
One mistake is you have to pass a function as parameter in the click function. So .click(mapPinSelect()) — Wimanicesir, Jun 28 '19 at 08:58
Plus, I am not sure if an event handler attached using `.click()` survives the HTML serialization. — 04FS, Jun 28 '19 at 08:59
Or you can add an attribute onclick with jQuery as well to have the same functionality — Wimanicesir, Jun 28 '19 at 09:00
Try to attach the handler using "on" (https://api.jquery.com/on/) — user2345998, Jun 28 '19 at 09:04

user2345998 · Answer 1 · 2019-06-28T10:20:32.173

0

You should use "on", that should work for dynamically created elements.

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

https://api.jquery.com/on/ Difference between .on('click') vs .click()

edited Jun 28 '19 at 10:20

answered Jun 28 '19 at 09:08

user2345998

649
13
31

How to set onclick event with JQuery?

1 Answers1