CODEWITHSUNDEEP
jquery
pheromix
pheromix

Reputation: 19327

Delegated events : selector of many elements

I want to handle 2 elements in a delegated events manner :

$("#pagination_container").on("click", ".image-container", function() {
     var c = $("#article_"+$(this).attr("data-pk"));
     var q = $("#qtecmd_"+$(this).attr("data-pk"));
     if (c.is(":checked")) {
         c.prop("checked", false);
         q.hide();
     }
     else {
         c.prop("checked", true);
         q.show();
     }
});

$("#pagination_container").on("click", "label", function() {
     var c = $("#article_"+$(this).attr("data-pk"));
     var q = $("#qtecmd_"+$(this).attr("data-pk"));
     if (c.is(":checked")) {
         c.prop("checked", false);
         q.hide();
     }
     else {
         c.prop("checked", true);
         q.show();
     }
});

As you can see they do the same thing. So is it possible to combine these two handlers into a unique one to select both ".image-container" and "label" ?

Upvotes: 2

Views: 38

Answers (3)

Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

You can do this by separating it by comma. Have a look :

$("#pagination_container").on("click", ".image-container,label", function() {
  //your js code
});

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You can pass any valid selector to on(), so here you can just pass a multiple-selector which selects both the target elements like

$("#pagination_container").on("click", ".image-container, label", function() {
     var c = $("#article_"+$(this).attr("data-pk"));
     var q = $("#qtecmd_"+$(this).attr("data-pk"));
     if (c.is(":checked")) {
         c.prop("checked", false);
         q.hide();
     }
     else {
         c.prop("checked", true);
         q.show();
     }
});

Upvotes: 2

BenG
BenG

Reputation: 15154

comma separated

$("#pagination_container").on("click", ".image-container, label", function() {

Upvotes: 1

Related Questions