Jquery:.preventDefault() 并返回 false 不起作用

Question

好的，这次代码让我抓狂

我花了 2 周多时间使用 e.preventDefault() 并返回 flase 以防止 onclick href 转到页面顶部，但它们没有用

我用过 javascript:void(0)它停止将窗口滚动到顶部，但未生成输入字段。

我确定在我的代码中使用这些解决方案存在问题，如果在我的代码中使用这两种方法存在问题，请告诉我

我的代码:

我正在尝试使用 PHP 和 jquery 构建向导

在此向导的第 2 步中，我想在用户单击时动态生成输入字段

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

这是Javascript

$(document).ready(function(){
/*****************************/




$('#table_name_error').hide();






  // all content starts hidden
 $('.wizardcontent').hide();
    $('#wizardcontent').hide();
  // initialize the wizard state
  load_state(1);

  // loads new state based on button clicked
  $(':button').click(function(){
        //reset the wizardcontent to hidden
        //$('#wizardcontent').hide();
        //load_state(++current_state);
    var current_state = $('#wizard').attr('class');
    //we only want the number, converted to an int
    current_state = parseInt(current_state.replace(/(step_)/, ""));
        //figure out if 'next' or 'previous' was clicked and load appropriate state
    if ($(this).attr('id') == 'next'){ 
    switch(current_state){
        case 1:

        $('#wizardcontent').hide();
            load_state(++current_state);
        break;

        case 2:
            var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').on('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').on('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });

        var table_name=$('#table1').val();
        table_name=$.trim(table_name);
            if (table_name.length<3 || table_name.length>64){
            $('#table_name_error').show();
            $('#table_name_error').html("<p>Error: Minimum length for table name is 3 <br/>Maximum length for table name is 64 characters</p>");
            }else{

            $('#wizardcontent').hide();
            load_state(++current_state);
            }

        break;
        case 3:


        $('#wizardcontent').hide();
            load_state(++current_state);
            break;

        }

     }
    else if ($(this).attr('id') == 'previous'){ load_state(--current_state); }

  });

/**************************/



});

function load_state(current_state){
    //disable all buttons while loading the state
    $('#previous').attr("disabled","disabled");
    $('#next').attr("disabled","disabled");
    $('#save').hide();
  //load the content for this state into the wizard content div and fade in
  var content = $('#step_' + current_state).html();
  $('#wizardcontent').html(content);
    $('#wizardcontent').fadeIn("slow");
  //set the wizard class to current state for next iteration
  $('#wizard').attr('class','step_'+ current_state);
  var iterator = 1;
  // the state heading h3. removing is no biggie
  $('#wizard h3').text("Step " + current_state);
  // loop through the list items and set classes for css coloring
  $('#mainNav li').each(function(){
        var step = $(this)
    if (iterator == current_state){ step.attr('class','current'); }
    else if (current_state - iterator == 1){ step.attr('class','lastDone'); }
    else if (current_state - iterator > 1){ step.attr('class','done'); }
    else{ step.attr('class',''); }
        // special case for step 5 because it doesn't have bacground image
        if (iterator == 3){ step.addClass('mainNavNoBg'); }
    iterator++;
  });
    //depending on the state, enable the correct buttons
    switch(current_state){
        case 1:
        $('#next').show();
                $('#next').removeAttr("disabled");
        $('#previous').hide();
            break;

        case 3:
        $('#previous').show();
            $('#previous').removeAttr("disabled");
            $('#next').hide();
            $('#save').show();
            break;
        default:
        $('#save').show();
        $('#previous').show();
        $('#next').show();

            $('#previous').removeAttr("disabled");
            $('#next').removeAttr("disabled");
            break;

    }
}

这是html代码

<fieldset class="wizardcontent" id="step_2">
                  <b>Type name of the first table:</b><br/>

                  <input type='text' id='table1' name='table1'/>
                  <div id='table_name_error' name='table_name_error' class='error'></div>
                  <br/><br/>

                  <b>Identify table attributes, along with the basic type:</b><br/>
                    <h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

                    <div id="p_scents">
                        <p>
                            <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
                        </p>
                    </div></fieldset>

Answer 1

.preventDefault();

我在你的代码中找不到 preventDefault(); 但这可能是一个拼写错误，就像你的标题一样......需要确定一些事情。

确保你有事件变量:

$('a').click(function(event) {
    // `event` is the event variable
});

然后只需使用:

event.preventDefault();

总而言之:

$('a').click(function(event) {
    event.preventDefault();
});

以上代码将阻止所有 anchor 转到其指定的超链接。

返回错误；

我以前经常使用 return false;，但最近我已经转移到 .preventDefault() 来处理事件。这里要记住的一件事是，如果包含 return false; 的函数的任何部分抛出异常，它将不会到达它。因此，您试图阻止的事件无论如何都会触发。