Question

Summary

I am using jQuery to clone a div (“boxCollection”) containing groups (“groupBox”) each of which contains a set of inputs. The inputs have change events tied to them at $(document).ready, but the inputs inside the cloned divs do not respond to the event triggers. I can not 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 put event handlers on dynamically created elements:

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

You appear to be putting a change() event handler on a <div> however (based on your sample HTML). Also, I would recommend not using an attribute selector for this. You’ve given it a class so instead do:

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

Lastly, you are trying to give each text input a unique name. You don’t say what your serverside technology is but many (most?) will handle this better than that. In PHP for example you can do:

And $_POST will contain an element “box” with an array of three values.