2

I have a little form with 3 input type text/number elements and a button.

The script gets the values entered when the user clicks on the button and these values are then appended on a <ul /> <li /> List.

However, the elements appended don't have the jQuery Mobile CSS style.

Here is my Fiddle where you can see the code I have been working on and how it behaves.

I tried using some ideas from This post but no matter how I change it around and adding the $(".config").trigger("create"); (I changed the names to fit my code when testing) it only makes the button look jQueryMobile style but the remove function doesn't work anymore.

Here's the code (incase you know the solution without looking at the demo):

<input type="text" id="MedNameStren" name="MedNameStren" placeholder="MedName & Strength" />
<input type="number" data-clear-btn="false" id="MedQuantity" name="MedQuantity" min="1" max="50" value ="1" />
<textarea cols="40" rows="4" name="MedDirections" id="MedDiresctions" placeholder="Type any directions written on your prescription for the above medicine." ></textarea>
<input type="button" id="AddScript" data-icon="plus" data-iconpos="right" value="Add New Prescription" />

<ul class="justList"></ul> 

$('#AddScript').click(function(){
var text = '<h2>' + $('#MedNameStren').val() + '</h2>' + 
           '<p><strong>Quantity: </strong>' + $('#MedQuantity').val() + '</p>' +
           '<p><strong>Directions: </strong>' + $('#MedDiresctions').val() + '</p>' +
           '<button>Delete</button>';

    if(text.length){
      $('<li />', {html:text}).appendTo('ul.justList')
    }
});

$('ul').on('click','button' , function(el){
    $(this).parent().remove()
});

Also, it would be nice if you could give me an idea of how to prevent the button from appending a new <li> if the MedNameStren and MedDirections are empty (The spinner will always display a number 1). Any suggestions or guide will be greatly appreciated!

4

1 回答 1

0

为了将此问题标记为已回答，我想将@Omar 在上述评论中发布的解决方案放在这里。

这个Fiddle是由@Omar 编写和提供的，它通过在 JS 中添加以下内容真正解决了我的问题：

$('button').button();

通过比较我的Fiddle和Omar 的. 希望这对任何人都有帮助。

于 2013-11-14T12:33:47.910 回答