Dynamically Adding multiple Buttons In Jquery needs to pass a specific parameter OnClick

Question

Keep in mind i am using Webforms ASP.NET with an Update Panel involved. I am very new to jquery, so here is what i have. I have a checkbox that gets loaded on pageload with a dynamic number of list items. I have figured out how to add a button next to each one dynamically with the code below.

$("INPUT[id^='DefaultContent_checkLstWebObjects_").each(function () {

                        $(this).after('<input type="button" id="BlueButton" value=">" class="peek" onclick="Selectall()"/>');
                    });

So now say i have 3 buttons, each button will call the same function, but needs to pass a unique parameter each time. Is this even possible with the setup i have? Thanks.

Answer 1

You can pass the ID of the checkbox in your function call - that would be unique. You are giving ALL your buttons the same ID, since there will be >1 you should use something like a classname, e.g.

$("INPUT[id^='DefaultContent_checkLstWebObjects_").each(function () {
  $(this).after('<input type="button" id="BlueButton" value=">" data-id="'+$(this).attr("id")+'" class="peek"/>');
});
$(".peek").on("click",function(){ 
  Selectall($(this).data(id));
});

Answer 2

You can pass this as parameter on the function call, this grantee you are sending the DOM node checkbox object, so you are free to handle data, attributes, CSS (what you want) more abstractly. This way you can handle any parameters you want to in you function. Think something like:

$("INPUT[id^='DefaultContent_checkLstWebObjects_").each(function () {
  
  // Passing this through the function call
  $(this).after('<input type="button" id="BlueButton" value=">" class="peek" onclick="Selectall(this)"/>'); 
});

// Your function
function Selectall(checkbox_obj){
  
  // Handling attributes data, ID in this example
  var checkbox_id = $(checkbox_obj).attr('id');
  
  // -----------------------------------
  // Your business rules here... 
  // -----------------------------------
}