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

Question

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?

Answer 1

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();
});