JQM (jQueryMobile) Dynamically removing elements
This is part 2 of this question (ok maybe part 3)
Here is a working example: http://jsfiddle.net/UcrD8/63/ Here is a earlier attempt and as you can see this works when selecting the first option: http://jsfiddle.net/UcrD8/4/ But using JQM it uses this as a label for the options and it is not selectable
The functionality to add a new select option is working but if I wanted to remove a selected option, this is not working.
UPDATE:
I did notice that the select element is being removed but jQM's added syntax is still displaying:
<div class="ui-select">
<div data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-c ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
开发者_运维知识库 <span class="ui-btn-text">Remove Selected Option</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow">
</span>
</span>
</div>
</div>
Need to remove this as well
Well since jQM has been updated several time, I was able to get this working
- http://jsfiddle.net/6fFLb/7/
I've seen a lot of issues with dynamic pieces.
For example, if I create page elements after a page load via $.mobile.changePage() that are supposed to be jquery-mobilied-ified (data-role and all that), they don't become jquery-mobile-ified AND there's no "parse my page again, jquery" method to be found anywhere. I've logged a bug as such with the jquery mobile team, but we'll see when they get around to it. Might just do it myself.
When I have to remove/hide an item I typically wrap the item in a div and then hide the div. I don't know how much that will help in this situation though.
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
<ul data-role=listview data-inset=true>
<li data-icon=delete> <a href=#>Element 1 </a></li>
<li data-icon=delete> <a href=#>Element 2 </a></li>
<li data-icon=delete> <a href=#>Element 3 </a></li>
<li data-icon=delete> <a href=#>Element 4 </a></li>
<li data-icon=delete> <a href=#>Element 5 </a></li>
</ul>
</div>
</div>
</body>
</html>
<script>
$("li .ui-icon").bind ("click", function (event)
{
$(this).closest ("li").remove ();
});
</script>
加载中,请稍侯......
精彩评论