Forum Moderators: open

Message Too Old, No Replies

Append text and value using JQuery

         

rwilson

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

10+ Year Member



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;
});

rwilson

3:53 pm on Mar 26, 2012 (gmt 0)

10+ Year Member



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

.append($('<li>$('#editInput')</li>'));

Fotiman

4:06 pm on Mar 26, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



.append('<li>' + $('#editInput').val() + '</li>');

rwilson

5:07 pm on Mar 26, 2012 (gmt 0)

10+ Year Member



Thank you so much! I appreciate the help.

rwilson

8:40 pm on Mar 26, 2012 (gmt 0)

10+ Year Member



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();
});
});

Fotiman

10:31 pm on Mar 26, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ 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. :)