CODEWITHSUNDEEP
jqueryjquery-mobile
StevieD
StevieD

Reputation: 7433

Adding button to collapsibleset header

Using jQuery mobile 1.4.5, I'm trying to place a button inside the header bar of a collapsible set like so:

<div data-role="collapsibleset" data-content-theme="a" data-iconpos="left" id="street_listing" class="ui-collapsible-set ui-group-theme-inherit ui-corner-all">
    <div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-first-child ui-last-child ui-collapsible-collapsed">
        <h3 id="street_name" class="ui-collapsible-heading ui-collapsible-heading-collapsed">

             <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-btn-inherit ui-icon-plus">Street name
                 <a href="#remove_street_button" class="ui-btn ui-btn-inline remove_street" street="street" id="remove_street">Remove</a>
                 <span class="ui-collapsible-heading-status"> click to expand contents</span>
             </a>
        </h3>
    </div>
</div>

The problem is that clicking the button doesn't register. It only opens and closes the header bar. Here is the function I'm trying to trigger when the button is clicked:

$(function() {
  $(document).on('click', ".remove_from_group", (function() {
    //do stuff
  }))  
});

Complicating matters is the collapsibleset get injected into the page dynamically via an ajax call.

Upvotes: 0

Views: 142

Answers (1)

Cory
Cory

Reputation: 1283

Add a button in a <span> inside the collapsible heading like this (give it a class too, like 'delbtn' below--you can float it right in css if you want--see the fiddle at bottom)

 <div data-role="collapsible">
    <h3>Section 1 <span class='delbtn '>
     <a href="#" data-role="button" data-inline="true" 
       class="ui-btn ui-mini ui-icon-delete ui-btn-icon-left">Remove</a>
     </span>
    </h3>

    

Then use this code to remove it on click

 $(".delbtn").click(function(){
    var section = $(this).closest(".ui-collapsible")
    section.remove()
});

Here is a working fiddle

Upvotes: 1

Related Questions