Welcome to WebmasterWorld Guest from 23.20.230.24

Forum Moderators: open

Message Too Old, No Replies

Append text and value using JQuery

     
6:52 am on Mar 26, 2012 (gmt 0)



I want to wrap each value submitted in <li> tags to create a list below it but I can't figure out how to append the tags and use the value together. Any help would be greatly appreciated

<form id="edit" action="destination.html">
<input id="editInput" type="text" />
<input type="submit" value="Add" />
</form>
<ul id="output" contenteditable="true">

</ul>
</section>



$(function() {

var editText = $('#editInput').val();

$('#edit').submit(function() {
$('#output').append($('#editInput').val());

return false;
});
3:53 pm on Mar 26, 2012 (gmt 0)



Basically, I want to know the correct syntax for this:

.append($('<li>$('#editInput')</li>'));
4:06 pm on Mar 26, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



.append('<li>' + $('#editInput').val() + '</li>');
5:07 pm on Mar 26, 2012 (gmt 0)



Thank you so much! I appreciate the help.
8:40 pm on Mar 26, 2012 (gmt 0)



When I try to use the ".deleteThis" function it doesn't work on <li> tags created after page load. Is there a way I can apply the function to new <li> tags?

$('#edit').submit(function() {
$('#output').append('<li><span contenteditable="true">' + $('#editInput').val() + '</span><span class="deleteThis">X</span></li>');
localStorage.setItem('todoData', $('#output'));
return false;
});

$(".deleteThis").click(function() {
alert('Handler for .deleteThis() called.');
//$("li").remove();
$(this).parent('li').hide();
});
});
10:31 pm on Mar 26, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



It doesn't work because you're attaching the handler to the click event of all elements with class "deleteThis" before you've created them in the submit function.

Try this:

$('#edit').submit(function() {
var toggleEl = $('<span class="deleteThis">X</span>').click(function() {
alert('Handler for .deleteThis() called.');
$(this).parent('li').hide();
});
$('#output').append('<li><span contenteditable="true">' + $('#editInput').val() + '</span>' + toggleEl + '</li>');
localStorage.setItem('todoData', $('#output'));
return false;
});

Not sure if that will work, but give it a try. :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month