好的,这次代码让我抓狂
我花了 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>
最佳答案
.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;
的函数的任何部分抛出异常,它将不会到达它。因此,您试图阻止的事件无论如何都会触发。
关于Jquery:.preventDefault() 并返回 false 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15584584/