The jQuery children of the cloned element do not respond to events

Question

Summary

I use jQuery to clone a group div ("boxCollection") containing groups ("groupBox"), each of which contains a set of inputs. Inputs have change events bound to them in $(document).ready, but inputs inside cloned divs do not respond to event triggers. I cannot get this to work in IE7, IE8 or FF3.

Here is my sample code:

HTML:

<div class="boxCollection"><div class="groupBox" id="group_1"><input type="text"></input></div></div>

JQuery Events:

$(".groupBox[id*='group']").change(function(){
    index = $(this).attr("id").substring(6);
    if($("input[name='collection_"+index+"']").val() == "")
    {
        $("input[name='collection_"+index+"']").val("Untitled Collection "+index);
    }
});

JQuery clone statement:

$(".boxCollection:last").clone(true).insertAfter($(".boxCollection:last"));

Answer 1

Use live()to automatically place event handlers on dynamically generated elements:

$(".groupBox[id*='group']").live("change", function() {
  ...
});

, change() <div> ( HTML). , . , :

$("div.groupBox ...")...

, . , , (?) , . PHP, , :

$_POST "box" .

Answer 2

, , ,

$(".groupBox[id*='group']").live('change', function() { });

, change live IE6/7, livequery, .