How to add JS for Jquerymobile Dynamic ID in Collapsible Sets

Question

I have a dynamic list showing collapsible set. It will generate different sets with id="selection_product_info_xxxx" xxxx=dynamic product id.

                        <div data-role="navbar">
                            <ul>
                                <li><a href="#" id="expand_product_info_810" data-theme="c" class="ui-btn-active"><font class="tab_font02">Product 810 Info</font></a></li>
                                <li><a href="#" id="expand_product_info2_810" data-theme="c" ><font class="tab_font02">Product 810 Info 2</font></a></li>
                            </ul>
                        </div>   
                        <!-- Tab End -->

                            <div data-role="collapsible-set">
                                <!-- Tab01 Start -->
                                <div data-role="collapsible" id="selection_product_info_810" data-collapsed="false">
                                    <h3 class="display-none">product 810 info</h3>
                                    <div>Test</div>
                                </div>
                                <!-- Tab01 End -->
                                <!-- Tab02 Start -->
                                <div data-role="collapsible" id="selection_product_info2_810">
                                    <h3 class="display-none">product 810 info 2</h3>
                                    <div>text 2</div>
                                </div>
                                <!-- Tab02 End -->     
                            </div>
                        <div data-role="navbar">
                            <ul>
                                <li><a href="#" id="expand_product_info_820" data-theme="c" class="ui-btn-active"><font class="tab_font02">Product 820 Info</font></a></li>
                                <li><a href="#" id="expand_product_info2_820" data-theme="c" ><font class="tab_font02">Product 820 Info 2</font></a></li>
                            </ul>
                        </div>   
                        <!-- Tab End -->

                            <div data-role="collapsible-set">
                                <!-- Tab01 Start -->
                                <div data-role="collapsible" id="selection_product_info_820" data-collapsed="false">
                                    <h3 class="display-none">product 820 info</h3>
                                    <div>Test</div>
                                </div>
                                <!-- Tab01 End -->
                                <!-- Tab02 Start -->
                                <div data-role="collapsible" id="selection_product_info2_820">
                                    <h3 class="display-none">product 820 info 2</h3>
                                    <div>text 2</div>
                                </div>
                                <!-- Tab02 End -->     
                            </div>

In order to make the button work, right now I need to add the event as follow in javascript by hard coding all product IDs. Is anybody know how I can rewrite the following scripts which makes the product id dynamically work and expand the relevant div under the product instead of hard coding the product id?

Remark: we are using jquery.mobile-1.3.2 and jquery-1.9.1.min.js

$("#expand_product_info_810") .on("click", function() {$("#selection_product_info_810").trigger("expand");})
$("#expand_product_info_820") .on("click", function() {$("#selection_product_info_820").trigger("expand");})
$("#expand_product_info2_810") .on("click", function() {$("#selection_product_info2_810").trigger("expand");})
$("#expand_product_info2_820") .on("click", function() {$("#selection_product_info2_820").trigger("expand");})

Answer 1

Update From your new information, this cant work, as you couldnt keep the pattern you gave:

id="selection_product_info_xxxx" xxxx=dynamic

should be:

id="selection_product_infox_xxxx" x_xxxx=dynamic

SO! You have to do it like this then!

$("a[id^='expand_product']").on("click", function(){
    var tmp = $(this).attr("id").split("_");
    var id = tmp[2] + "_" + tmp[3];
    $("#selection_product_" + id).trigger("expand");
});

http://jsfiddle.net/rb9Rv/

if you have control over the generated HTML, this would be smarter:

<ul>
    <li><a data-tab="info_810" class="clickButton ui-btn-active" href="#" id="expand_product_info_810" data-theme="c" ><font class="tab_font02">Product 810 Info</font></a></li>
    <li><a data-tab="info2_810" class="clickButton" href="#" id="expand_product_info2_810" data-theme="c" ><font class="tab_font02">Product 810 Info 2</font></a></li>
</ul>


$("a.clickButton").on("click", function(){
    $("#selection_product_" + $(this).attr("data-tab")).trigger("expand");
});

http://jsfiddle.net/ctMtA/

---

Assuming that button, is a <button>, you could do it like this:

$("button[id^='expand_product_info_']").on("click", function(){
    var id = $(this).attr("id").split("_")[3];
    $("#selection_product_info_" + id).trigger("expand");
});

If it still dont work, you have to do some debuging like so:

$("a[id^='expand_product_info_']").on("click", function(){
    alert("click works!");
    var id = $(this).attr("id").split("_")[3];
    alert(id);
    $("#selection_product_info_" + id).trigger("expand");
});

i made quick fiddle for you, but the trigger expand didnt work, also with fixed id's like you said. This seem to changed in version 1.4, if you have 1.4, try this:

$("a[id^='expand_product_info_']").on("click", function(){
    var id = $(this).attr("id").split("_")[3];
    $("#selection_product_info_" + id).collapsible("expand");
});

working fiddle: http://jsfiddle.net/5pyvy/2/