Question

I’m using jQuery Mobile and I have this html:

<ul id="thelist" data-corners= "false" >
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">

<div data-role="collapsible" data-collapsed="false" data-theme="a">
 <h3>$1.48   -  10/31/2012   -   niko Reade #14410  -  Brooklyn Ny</h3>
 <div data-role="controlgroup"  data-type="horizontal">
  <a class= "green" href="categorize.html" data-transition="slide"  data-direction="reverse" data-role="button">Yes</a>
  <a class="red" href="#" data-role="button">No</a>
  <a class= "blue" href="IDontKnow.html" data-transition="slide"data-role="button">I don't know</a>
 </div>
 </div>
</ul>

And I’m trying to animate the drop down, but I’m having trouble selecting it. Here is my JS:

$('#transPage, #categorizePage, #IDKPage').live('pageinit', function() {
$('.trans .theListItem h3').click(function() {
     var  $controlGroup = $(this).children('.ui-collapsible-content').css("background-color", "#ff3333");
});
});

.ui-collapsible-content works well in the CSS, but doesn’t work when I try to use it with JS. Any idea why my selector is wrong, and how to animate the collapsible content? Thanks.

Answer 1

1. Your HTML markup is incorrect. You’re missing a closing </div> at the end.

2. .live is deprecated. See here.

   As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.
   Users of older versions of jQuery should use .delegate() in preference to .live()

3. There are no child elements inside the h3 element with the class ui-collapsible-content, in fact, there is only text inside the h3 element.

4. Make sure you have the latest version, because there seem to be some problems associated with the pageinit event for some of the older ones. Make sure that the event is executed.