jquery dom problem

Question

I am working on a script that has to build out DOM objects on the fly and I am having some issues with a tabular system that is attached to the injected DOM objects.

When the page is first loaded the first tab is shown and there is a next button. When the user clicks the next button the next step is shown. Well anything after the first step is being built out on the fly but for some reason when I test it out with my tab system the next step does not show.

HTML (first Step):

<div id="trans_modal" class="modal_part grey_modal">

    <!-- Step 1 -->
    <div class="steps" id="step0">
        <div class="modal_group english_container">
            <strong>Original English:</strong>
            <div class="english_version"></div>
        </div>
        <% unless @user_settings.google_integration == 0 %>
            <div class="modal_group google_container">
                <strong>Machine Translation:</strong><br />
                <div class="google_version"></div>
            </div>
        <% end %>
        <div class="modal_group translate_container_1">
            <strong>Translated Version:</strong><br />
            <textarea class="translate_version" name=""></textarea>
        </div>
        <div class="clear"></div>
        <div class="modal_controls single_translation steps" id="step1">
            <a class="grey_button close_modal close_button" href="#"><span>Close</span></a>
            <a class="grey_button" href="#" id="transSubmit"><span>Save and Close</span></a>
        </div>
        <div class="modal_controls step_translation">
            <a class="grey_button close_modal close_button" href="#"><span>Close</span></a>
            <a class="grey_button next" href="#step1"><span>Next</span></a>
        </div>
    </div>

</div>

jQuery on-the-fly DOM building:

function buildStepProcess() {
        var tmp = "";
        $.each(childElements, function(i, val) {
            var stepNum = i + 1;
            // tmp += "<!-- Step " + stepNum + " -->";
            tmp += "<div class='steps' id='step" + stepNum + "'>";
                tmp += "<div class='modal_group translate_container_2'>";
                                    tmp += "Original English:<br />";
                                    tmp += "<div class='translate_construct' id='translate_construct'></div>";
                                    tmp += "</div>";
                                tmp += "<div class='modal_group translate_container_3'>";
                                    tmp += "Complete Version:<br />";
                                    tmp += "<div class='translate_complete'></div>";
                                tmp += "</div>";
                                tmp += "<div class='clear'></div>";
                                tmp += "<div class='modal_controls'>";
                                    tmp += "<a class='grey_button close_modal close_button' href='#'><span>Close</span></a>";
                                    tmp += "<a class='grey_button next' href='#step" + stepNum + "'><span>Next</span></a>";
                                tmp += "</div>";
                                tmp += "</div>";
                                tmp += "</div>";
            tmp += "</div>";
        });

            $('#trans_modal').append(tmp);

            $('.next').livequery('click', function(){
                $('.steps').hide();
                var active = $(this).attr('href');
                console.log(active);
                console.log($(active).text());
                $(active).show();
                return false;
            });
    }

Sorry if this is confusing. I just can't figure out what I am doing wrong

Thanks! Dennis

Answer 1

Is your event binding the problem?

$('.next').click(function(){
    $('.steps').hide();
    var active = $(this).attr('href');
    console.log(active);
    console.log($(active).text());
    $(active).show();
    return false;
 });

Answer 2

It looks to me like you have two extra close div tags at the end of your string building.

EDIT:

Additionally, you needn't be using the livequery plug-in, as the functionality it provides is now a part of the jQuery core. Use .live() instead. Here's the documentation for that: http://api.jquery.com/live/