Question

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

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

当第二步显示并附加链接以返回第一步或转到第三步时，这些链接不起作用。似乎防止默认操作无效。当您单击链接时，他们会转到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>

Answer 1

您似乎在动态添加步骤。

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

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

要不必经常重新绑定，您可以使用事件委派来绑定事件这将通过静态元素间接地将事件绑定到动态元素。

而不是：

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

使用on()代理或delegate()，具体取决于您的jQuery版本，类似于：

// 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，你应该使用最喜欢的最接近的静态元素。

Answer 2

我认为问题在于，当你的$（“＃step1”）。click（）的处理程序被解析时，没有＃step1元素将它绑定到 - 元素是稍后创建的，当＃step2点击。

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

假设您的链接元素位于＆lt; div id =“links”＆gt;＆lt; / div＆gt;之内（他们可能不是，但你没有提供任何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>');
        });
    });

防止默认不能在我的JavaScript中工作

2 个答案: