Search jQuery

jQuery Forum

having trouble with events on dynamically added objects (again)

in Using jQuery • 7 months ago

Again I'm struggling with events on dynamically added elements.

is there something I'm missing? The code works fine for elements that exist on startup..

$(".product-like-wrap").on("click", ".symbol-circle", function () {
C.Ajax.Invoke(null, "Api", "LikePicture", { id: id }, {}, "POST", function (data) {
let $wrap = $caller.closest(".product-like-wrap");
$($wrap).find(".check-symbol").removeClass("hide");
$($wrap).find(".symbol-circle").addClass("hide");
$($wrap).find(".exists > .inner > .count").html(data.length);
$($wrap).find(".exists").removeClass("hide");
});
});

the like-wrap div below is static, but all content is added after startup.

<div class="like-wrap">
<div class="product-like-wrap flex-center-center">
<span class="check-symbol hide" title="Du har likt bilde"><i class="fas fa-check"></i></span>
<div class="symbol-circle align-center " title="Lik bilde" data-id="112">
<i class="fas fa-thumbs-up symbol" data-id="112"></i>
</div>
<span class="exists hide"><span class="inner"><span class="separator">/</span><span class="count">0</span></span></span>
</div>
</div>

--------------
Just so we're clear - you need a hero?

Replies(1)

watusiware

Re: having trouble with events on dynamically added objects (again)

7 months ago

1. You need to use delegation, rather than binding. You already are, but perhaps you are delegating to an element that doesn't exist yet. I'm not clear, though, from your comments if product-like-wrap exists yet or not on startup. Do you really mean that ALL content is added after startup? Is the <body> COMPLETELY empty?

The document ALWAYS exists, so it is always safe to delegate to document.

$(document).on('click', '.product-like-wrap', function(...

Make sure you understand delegation:

https://learn.jquery.com/events/event-delegation/

----

I see other potential problems"

- Where is id defined? Is it defined, and does it have a value?

- Where is data defined? Is it defined, and does it have a value?

Although it isn't harmful, $($wrap) is redundant. Just write $wrap. .closest() returned a jQuery. It doesn't make sense to ask for a jQuery of jQuery. It just gives you back the same thing.

I see you are using the common good practice of using a $ as the first character of variable that contain a jQuery object. The $ is there to remind you that it contains a jQuery, rather than a DOM element.

----

What is C.Ajax.Invoke? Did you write it, or is it a part of some library? The (data) looks suspicious to me. I have to guess that you defined data somewhere e.g. let data = {}; which you did not show us, and then your function returns data by modifying content of data? This is bad practice in JS. I would return the data from the function, so that you would write:

let data = C.Ajax.invoke(...)

Other people reading your JS code will not normally expect a function call to have side-effects on arguments! But I am only GUESSING at what the code that I cannot see is doing!

Top Reply

Response title

Attachments

jQuery Forum

having trouble with events on dynamically added objects (again)

Replies(1)

Re: having trouble with events on dynamically added objects (again)

Statistics

Tags

Actions