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

上述代码会阻止所有锚点转到指定的超链接。

返回false;

我过去常常使用return false;，但这些天我已经转移到.preventDefault()了。这里要记住的一件事是，如果包含return false;的函数的任何部分抛出异常，它将无法到达它。所以你试图阻止的事件无论如何都会被激发。

Answer 2

$('.class').click(function() {

// Do what ever here

return false;

});

这适合我。

Answer 3

我认为你可以这样做：

    $('#addSnt').click(function(event) {
        if (event.preventDefault) {
            event.preventDefault();
            // Do something
        } else {
            // Do something
            return false;
        }
    });

如果event.preventDefault退出，则不需要return false，否则请使用return false来防止默认行为。

Jquery：.preventDefault（）并返回false不起作用

3 个答案: