JQuery: Dynamically-generated form fields not submitted and event handlers appear to fire multiple times_问答_开发者

I'm new to JQuery, so I apologise if there's something which should be obvious which I'm unaw开发者_如何学Goare of. I seem to be having a couple of issues some JQuery I'm trying to implement:

Code: http://pastebin.ca/1843496 (the editor didn't seem to like HTML tags)

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function() {

var currentcontainer;

$('a.edit').click(function() {

currentcontainer = $(this).closest('div.container');

currentcontainer.prepend('<form action="post_test.php" method="POST"><input type="hidden" name="editing" value="1" /><input type="hidden" name="containerid" value="' + currentcontainer.attr('containerid') + '" />');

var old_title = currentcontainer.find('div.title_container>.editable').text();

currentcontainer.find('div.title_container>.editable').html('Title: <input type="text" name="new_title" value="' + old_title + '" />');

currentcontainer.append('</form>');

$(this).addClass('save');
$(this).text('Save');
$(this).removeClass('edit');

$('a.save').click(function() {
currentcontainer.find('form').submit();
});

});

});
</script>
</head>
<body>
<div class="container" containerid="1">

<div class="title_container">
<span class="editable">
Foo
</span>
</div>

<div class="links">
<a class="edit" href="#">Edit</a>
</div>
</div>
</body>
</html>

post_test.php simply contains: [?php print_r($_POST); ?] in an attempt to find out what's actually being submitted.

The first issue I'm having is that only the hidden form fields are actually being submitted. If I insert tags into the container DIV manually it works as expected, but when done as above the text field doesn't get posted. From what I've read, I gather it's to do with the fact that the DOM is being modified after it's loaded, but the thing that's puzzling me is why, in that case, there are no issues referencing the other added hidden fields or the tag. I've experimented with changing the event handler for a.save to '.live('click', function ...' and also using LiveQuery to no avail.

The other issue is that when a.save is clicked, before the form is actually submitted, as far as I can tell the event handler is running again, replacing the value entered into the text field with the value of editable.text(), which is what ultimately gets submitted.

I'm sorry if any of this is unclear.

Regards,

Try this for your jQuery portion:

$(document).ready(function() {            
  $('a.edit').click(function() {
    var con = $(this).closest('div.container');
    con.wrapInner('<form action="http://home.ncraver.com/test2.html" method="POST"></form>');
    con.find("form").append('<input type="hidden" name="editing" value="1" /><input type="hidden" name="containerid" value="' + con.attr('containerid') + '" />');

    con.find('div.title_container>.editable').each(function() {
        $(this).html('Title: <input type="text" name="new_title" value="' + $(this).text() + '" />');
    });

    $(this).removeClass('edit').addClass('save').text('Save').unbind('click').click(function() {
      con.find('form').submit();
    });
  });
});

Changes:

.wrapInner() - Use this instead of <form> then </form>
.each() - Just a neater way of setting the value
.unbind() - Remove the event handler from the save link

Your handler was executing twice because $('a.edit') says "find all elements with class 'edit'" and rig this event handler up to them. After that the handler is on the element...the fact that you removed the edit class doesn't mean the handler was removed, it's still on the element. We fix this by calling .unbind('click') to remove it.

The fact that it's added to the form after the page loads is not going to prevent it from being submitted. Load this in Firefox with Firebug and inspect the form once it's loaded to make sure that everything is situated properly inside the form and the tags are well-formed.