Question

I’m using the jQuery template engine to add dynamic DOM elements (specifically DIVs). To control them I use the ‘live’ method (for ‘click’ events for example).

At some point I need to find some newly created elements using the ‘filter’ method. It seems that it won’t find the newly created elements.

Any ideas why?

My code is comprised of such DIVs with different data-setid attributes. They are generated using jQuery .tmpl plugin.

I’m using the selector to find the appropriate “ListOfStuff” DIV and add append to him a new “Stuff” DIV.

So it will work on such DIVs generated on server and then served, but won’t worked on newly created ones.

   <div class="SomeStuffSet" data-setid="MySetID">
        -- some stuff here --
        <br /><br />

        <div class="ListOfStuff">

           <div class="Stuff">
            My Name
           </div>

           <div class="Stuff">
            My Name
           </div>

           <div class="Stuff">
            My Name
           </div>

        </div>
   </div>

and my selector is like this:

var setdiv = $('div').filter('.SomeStuffSet').filter(function () { return $(this).attr('data-setid') == $('#currentSetID').val(); }).children('.ListOfStuff');

Answer 1

I dont think you need a filter you could try this:

$("div.SomeStuffSet[data-setid='" + $("#currentSetID").val() + "'] > div.ListOfStuff");

In regards to your comment:

I believe that you are trying to do this

var setdiv =  $("div.SomeStuffSet[data-setid='" + $("#currentSetID").val() + "'] > div.ListOfStuff");

//Code to append newly created object
//...

console.log(setdiv);  // My assumption is that you believe setdiv should contain newly created object.  This is not correct

//repopulate setdiv with newly create objects
setdiv = $("div.SomeStuffSet[data-setid='" + $("#currentSetID").val() + "'] > div.ListOfStuff");

console.log(setdiv)  //now setdiv with contain newly created objects.