jquery dom问题

Question

我正在处理一个脚本，这个脚本需要动态地创建DOM对象，而且我的表格系统附带了一些注入DOM对象的问题。

当第一次加载页面时，会显示第一个选项卡，并且存在下一个按钮。当用户点击下一个按钮时，显示下一步。那么第一步之后的任何事情都可以即时建立，但由于某种原因，当我使用我的标签系统进行测试时，下一步不会显示。

HTML（第一步骤）：

<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上即时DOM建设：

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; 
      }); 
    } 

很抱歉，如果这是令人困惑的。我只是无法弄清楚我做错了什么

谢谢！ Dennis

Answer 1

您的活动是否会解决问题？

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

Answer 2

它看起来像我在你的字符串构建结束时有两个额外的close div标签。

编辑：

此外，您不必使用的liveQuery插件，因为它提供的功能现在是jQuery的核心的一部分。改为使用.live()。以下是该文档：http://api.jquery.com/live/