jQuery not accessing DOM elements loaded via .load()

Question

Hi all,

I've read through some of the other posts and followed their suggested advice but to no avail. My function is called via an onclick event embedded within an element. Everything works fine. The data loads, but my focus event handler does not. "d-category" is a loaded element class. It does have multiple occurrences within the loaded code. However, I tried changing the code to a singular id for each element and that still didn't work. Consider the code:

function loadData(id) {
            $("#entry-body").slideUp();
            $("#entry-head").slideUp();
            $("#edit-entry").load("/edit/", { id:id }, function(){
                $(".d-category").focus(function(){
                            $(this).html('<p>example html</p>');
                                    });
                            });
            $("#edit-entry-head").slideDown();
            $("#edit-entry").slideDown();

        };

I have tried moving the block of code containing the focus event handler to other locations in conjunction with .live() to bind it with the loaded elements, but to no avail. Any ideas?

---

EDIT

I believe the problem with the code above is that .d-category is only matching the first indexed element? However, I have stumbled upon something that works exactly how I want it to. I will add an answer below.

Answer 1

Use this instead:

$(".d-category").live('focus', function() {
     $(this).html('<p>example html</p>');
})

Answer 2

Here is what works as I wanted it to:

function loadData(id) {
            $("#entry-body").slideUp();
            $("#entry-head").slideUp();
            $("#edit-entry").load("/edit/", { id:id }, function(){
                $('.d-category').each(function(){
                    $(this).one('click', function(){
                        $(this).insertSelectbox();});});

            });
            $("#edit-entry-head").slideDown();
            $("#edit-entry").slideDown();
            }

$.fn.insertSelectbox = function(){
        var sid = $(this).attr('id');
        var opt1 = $('#' + sid).html();
        $("#" + sid).html('<select name="category" id="cat-selector"><option>'  
        + opt1 + '</option>{% for cat in ctgy %}<option>{{ cat.name }}</option>'
        + '{% endfor %}</select>');}

I'm sure it can be refined a little more...but it works!