防止默认值在我的 javascript 中不起作用

Question

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

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

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

为什么我的第 2 步链接有效，而第 1 步和第 3 步的链接无效？

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/)，绑定到附近的某个父对象并过滤链接元素，如“直接和委托事件”部分所述在上面的链接中。

假设您的链接元素在

中（它们可能不在，但您没有提供任何 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>');
        });
    });