Jquery: .preventDefault() and return false doesn't work

Question

Ok this time the code drive me crazy

I spend more than 2 week using e.preventDefault() and return flase to prevent onclick href from goes to the top of page , but they didn't work

I've used javascript:void(0) it stopped scrolling window to top, but the input fields doesn't generated .

I'm sure there's a problem using these solutions in my code ,If there's a problem of using these 2 methods with my code please tell me

My code:

I'm trying to build a wizard using PHP and jquery

inside step 2 in this wizard, I want to dynamically generate input fields when user click on

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

this is 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;

    }
}

This is html code

<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

I think you can do like this:

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

if event.preventDefault exits you need't the return false,otherwise use return false to prevent default behavior.

Answer 2

.preventDefault();

I couldn't find preventDefault(); in your code but it's probably a typo error like in your title... a few things to make sure of.

Make sure you have the event variable:

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

Then just use:

event.preventDefault();

So altogether:

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

The above code would prevent all anchors from going to their designated hyperlink.

return false;

I used to use return false; quite a lot, but I've moved to .preventDefault() for events these days. One thing to remember here is that if any part of your function containing the return false; throws an exception it will not reach it. So the event you're trying to prevent will fire regardless.

Answer 3

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

// Do what ever here

return false;

});

This works for me.