2013-01-18 73 views
0

我试图动态地填充JQM手风琴/折叠套件的内容。我看过http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH20.php,但这些例子似乎已经过时了。所以,我试图想出一个工作的例子,但我目前卡住,不能看,为什么这不应该工作:Jquery Mobile,可折叠套件和儿童

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".mySet").bind('expand', function (event, ui) { 
     /* This prints e.g. "This is the first entry\n 
     I'm the collapsible set content for section 1." */ 
     console.log($(this).text()); 

     /* This should print "This is the first entry" (=the innerText of <h3>) 
     but it doesn't, it prints "This is the first entry\n 
     I'm the collapsible set content for section 1." as well */ 
     console.log($(this).next().text()); 

     /* This should just print "I'm the collapsible set content for section 1" 
     (=the innerText of <p>) but it doesn't, it prints e.g. "This is the 
     first entry\n I'm the collapsible set content for section 1." as well */ 
     console.log($(this).nextAll("p").text()); 
    }); 
}); 
</script> 

<div data-role="collapsible-set"> 
    <div data-role="collapsible" class="mySet"> 
     <h3>This is the first entry</h3> 
     <p>I'm the collapsible set content for section 1.</p> 
    </div> 
    <div data-role="collapsible" class="mySet"> 
     <h3>This is the second entry</h3> 
     <p>I'm the collapsible set content for section 2.</p> 
    </div> 
</div> 

有谁看到,为什么jQuery将不会沦落$(this)(=指向当前扩大<div ...class="mySet">?如果我在Opera的FreeBSD的调试代码,我可以看到,$(this)似乎是一样$(this).next()(至少他们有相同的值的innerHTML等)

谢谢为你的帮助!

回答

0

所以,摆弄一下后,我想出了foll由于黑客/解决方法:

$(document).ready(function() { 
    $(".mySet").bind('expand', function (event, ui) { 
     /* I'm just creating a new var "myDiv" which points to my current div (so in a 
     way "myDiv" is just a copy of "this" */ 
     var myDiv = $("#"+$(this).attr('id')); 
     var myP = myDiv.find('p:first'); 

     // Works as expected, prints "I'm the collapsible set content for section 1." 
     console.log(myP.text()); 
    }); 
});