1

好吧，这次代码让我发疯

我花了两个多星期使用 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>
4

3 回答 3

6

.preventDefault();

我在您的代码中找不到preventDefault();，但这可能是您的标题中的拼写错误……需要确保的几件事。

确保你有事件变量：

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

然后只需使用：

event.preventDefault();

总而言之：

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

上面的代码将阻止所有锚点转到它们指定的超链接。

返回假；

我过去经常使用，但这些天return false;我已经搬到了活动中。.preventDefault()这里要记住的一件事是，如果您的函数的任何部分包含return false;抛出异常，它将无法到达它。因此，您试图阻止的事件无论如何都会触发。

于 2013-03-23T08:00:11.230 回答
2 
$('.class').click(function() {

// Do what ever here

return false;

});

这对我有用。

于 2013-03-23T08:17:38.033 回答
1

我认为你可以这样做：

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

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

于 2017-08-10T09:02:39.227 回答