Problem While Getting All of Input Values

I entered Jquery very fast and I m having trobule.I m trying to get all input value and alert them.But i get only first input.Also I need to put span because input should be draggable.Where I m doing.I hope you ll answer it

<label>Paragraph</label>
<span class="blue">
<div id="page"></div>
</span>
<script>
$("label").click(function(){
$("#page").append('<span class="blue"><input  type="text" /></input></div></span>');
$(".blue").draggable();
$("#page").droppable();
});
$("#page").dblclick(function(){
var panel= $("#page .blue");
var inputs = panel.find("input");
alert(inputs.val());
});
</script>

or the other style

<p></p>
<label>Paragraph</label>
<span class="blue">
<div id="page"></div>
</span>
<script>
$("label").click(function(){
$("#page").append('<span class="blue"><input  type="text" /></input></div></span>');
$(".blue").draggable();
$("#page").droppable();
});
$("#page").dblclick(function(){
alert($("#pa开发者_JS百科ge input").val());
});
</script>

---

Like Niklas said, you want to use each() here. Here's an example, based off of your original code:

$("label").click(function() {
    $("#page").append('<div><input type="text" value="foo" class="fooBox" /></div>');
});

$("#page").dblclick(function(){
    $('.fooBox').each(function() {
        alert($(this).val());
    });
});

Here is a jsFiddle where you can try it out.

---

Use .each() to loop through each input. Like this:

var inputs = panel.find("input");
$(inputs).each(function(i,e){
  alert($(e).val());
});

---

Based on your previous post plus this one, you seem to have a misunderstanding of how jQuery selectors work.

alert($("#page input").val()); will not work, because $("#page input") returns a collection of every element that is an input inside of the page element.

There are some actions you can call on this that will apply to every item in the collection. Such as $("div.page").css('background-color','red'); - this will apply a red background color to every div with a class of page without the need to iterate over them individually.

But there are some actions that can not apply to the collection, and will only choose the last (or first, I cant remember which) item in the collection. For example, what you are trying to do: alert($("#page input").val()); will only alert one value. Because .val() must be applied only to one single element. Not an entire collection. So wehn you call it on the entire collection, it will only return the .val() for one of them. To alert every value, you need to iterate over the collection.