在运行时生成元素时的JQuery处理事件

Disclaimer: I'm new to JQuery

I don't know how to title this question but first my code is below

$(document).on("click" ,'[id^="picChangeAddress"]', function() {
    $('div[id^="divAddressSet"]').toggle();
});

Please not that I have the same numbers of div's and checkboexes, each name format is same also such as checkboxes picChangeAddress1, picChangeAddress2 and so on, and div's divAddressSet1, divAddressSet2 and so on.

I've used the above code because these id's are being generated at run time. There are few things i need to ask first when i click on one checkbox all it effects every div div[id^="divAddressSet"] on the page and they all toggled when i click on any any of [id^="picChangeAddress"] checkbox. I would like you to help me on how to only show or hide only one div at a time.

Any Idea?

You can extract number from ID, then you can use ID selector to hide the div

$(document).on("click" ,'[id^="picChangeAddress"]', function() {
    var num = parseInt(this.id.match(/\d+/)[0],10); //Extract number
    $('#divAddressSet'+num).toggle();
});

You need to extract the number from the ID and use that so that you target the correct selector:

$(document).on("click" ,'[id^="picChangeAddress"]', function() {
    $('div[id="divAddressSet'+this.id.substring(16)+'"]').toggle();
});

Try this:

$(document).on("click" ,'[id^="picChangeAddress"]', function() {
  var o = this.id.split('').pop();
  $("#divAddressSet"+o).toggle();
});