2

我有一个脚本，用于隐藏和显示页面的不同部分。它的目的是让用户在点击链接时来回浏览内容。我需要将所有这些内容保留在同一页面上，我不能将其分成单独的页面。

到目前为止，当页面加载时，我可以隐藏和显示我想要的第一步，然后附加一个链接，将用户带到第二步。

当第二步显示并附加一个链接以返回到第一步或转到第三步时，这些链接不起作用。似乎阻止默认操作不起作用。当您单击链接时，它们会转到他的 URL，而不是显示第一步或第三步。

为什么我的第二步链接有效，而不是我的第一步和第三步链接？

stepOne.show();
    stepOneTwo.show('fast', function() {
        stepOneTwo.append( z + '<a href="#step2" style="color:white;"    id="step_2">GO TO NEXT STEP >></a></div>');
        });

            $("#step_2").click(function(e){ 
            e.preventDefault();
                 stepOne.hide(); 
                 stepOneTwo.hide(); 
                 stepTwo.toggle();
                 stepTwoTwo.show('fast', function() {
                 stepTwo.append(z + '<a href="#step1" style="color:white;" id="step_1">BACK >></a></div></br></br>' + z + '<a href="#step3" style="color:white;" id="step_3">GO TO NEXT STEP >></a></div>');
                }); 
            }); 

            $("#step_1").click(function(e){ 
            e.preventDefault();
                stepTwo.hide();
                stepTwoTwo.hide();
                stepThree.hide(); 
                stepThreeTwo.hide();
                stepThreeThree.hide();
                stepThreeFour.hide();
                stepFour.hide();
                stepFourTwo.hide();
                stepFourThree.hide();
                k.hide();
                stepOne.show();
                stepOneTwo.show('fast', function() {
                stepOneTwo.append( z + '<a href="..." style="color:white;" id="step_2">GO TO NEXT STEP >></a></div>');
                });
            });

            $("#step_3").click(function(e){ 
            e.preventDefault();
                 stepTwo.hide(); 
                 stepTwoTwo.hide(); 
                 stepThree.toggle();
                 stepThreeTwo.toggle();
                 stepThreeThree.toggle();
                 stepThreeFour.show('fast', function() {
                 stepThree.after(c + '<a href="..."       style="color:white;" id="step_2">GO BACK >></a></div> </br></br>' + c + '<a href="..." style="color:white;" id="step_6">GO TO NEXT STEP >></a></div>');                                   
                }); 
            }); 

});     
</script>
4

2 回答 2

2

看来您正在动态附加步骤。

在事件绑定时，元素必须存在于 DOM 中。

如果您已经绑定了一个事件，但随后将 DOM 元素替换为该事件，则该事件将与 DOM 元素一起被删除，并且必须重新绑定。

为了不必不断地重新绑定，您可以使用事件委托来绑定事件。
这将通过静态元素将事件间接绑定到动态元素。

而不是这个：

$("#step_2").click(function(e){ //... });

根据您的 jQuery 版本，使用on()和 delegate() 或delegate()，类似于：

// when using jQuery 1.7 or later
$("body").on("click", "#step_2", function(e){ //... });

// or when using jQuery 1.6 or earlier -- note the reversal of event and target
$("body").delegate("#step_2", "click", function(e){ //... });

而不是body你应该使用最接近的静态元素。

于 2013-03-26T16:11:35.053 回答
0

我认为问题在于，在解析 $("#step1").click() 的处理程序时，没有将其绑定到的 #step1 元素 - 该元素是稍后在单击 #step2 时创建的。

要允许处理程序绑定到尚未创建的元素，请使用 on() ( http://api.jquery.com/on/ )，绑定到附近的某个父对象并过滤链接元素，如“上述链接中的直接和委托事件”部分。

假设您的链接元素在 <div id="links"></div> 内（它们可能不是，但您没有提供任何 HTML 源代码，所以我正在发明一点），您可以重写您的步骤 1处理程序（对于其他处理程序也是如此）：

    $("#links").on("click", "#step_1", function(e){ 
        e.preventDefault();
        stepTwo.hide();
        stepTwoTwo.hide();
        stepThree.hide(); 
        stepThreeTwo.hide();
        stepThreeThree.hide();
        stepThreeFour.hide();
        stepFour.hide();
        stepFourTwo.hide();
        stepFourThree.hide();
        k.hide();
        stepOne.show();
        stepOneTwo.show('fast', function() {
            stepOneTwo.append( z + '<a href="..." style="color:white;" id="step_2">GO TO NEXT STEP >></a></div>');
        });
    });
于 2013-03-26T16:19:38.147 回答