将Window Resize事件适当地附加到每个元素

Question

I've been trying to figure out how, can I attach a Windows Resize event separately to each element (these elements are appended dynamically by PHP via ajax invoke).

The problem I also have is that I am utilizing global variables ie the variable id .

I am trying to figure out how I can attach Window Resize even separately to each element.

EDIT: Here's a screenshot.

Answer 1

If you are using jQuery, you can attach custom events to any element.

So, add the event "resize" (this event only exist for window element, so here, it's a custom event, you can name it like you want)

$("#" + id).on("resize", function(){

    // Do stuff here

});

And trigger it from window resize

$(window).on("resize", function(){

    $("#" + id).trigger("resize");

});

EDIT :

If you want that every "#" + id has "resize" event, event if appended in document later.

$(document).on("resize", "#" + id, function(){

    // Do stuff here

});

Answer 2

It had to do with the PHP and the id it assigned to the element, so all three elements have the same ID. That makes sense. So I modified the ID inline and realized the .each() method works.