Question

精炼问题

我的实时表单和实时表单的JS代码提交...

$('#addHotlink').click(function() {

$('body').after('<div id="lightBox" style="height: ' + htmlHeight + 'px;"><div><h3>Choose a name for your hotlink:<img id="lightBoxClose" src="http://www.example.com/images/closedAccordion.png" height="17" width="17" alt="" title="Close this box" /></h3><form id="addHotlinkForm" action="#" method="post" autocomplete="off"><input id="hotlinkName" type="text" maxlength="15" /><input class="submit" type="submit" value="Add Hotlink" /></form></div></div>');
$('#lightBox').hide().fadeIn('fast');
return false;
});

$('#addHotlinkForm').live('submit', function(event) {

event.preventDefault();
var hotlinkName = $('#hotlinkName').val();
if (hotlinkName.length > 0) {

    $.ajax({data: {hotlinkName: hotlinkName, hotlinkURL: pageURL},
                    error: function() {

                            alert('Error');
                    },
                success: function() {

            alert('Yay');
        }
    });
}

}）;

我的ajax.php ......

if (isset($_REQUEST['hotlinkName']) && isset($_REQUEST['hotlinkURL'])) {

$q = $dbc -> prepare("INSERT INTO hotlinks (id, hotlinkName, hotlinkURL) VALUES (?, ?, ?)");
$q -> execute(array($_SESSION['id'], $_REQUEST['hotlinkName'], $_REQUEST['hotlinkURL'])); 
}

我在ajax调用之前设置了我的ajax设置...

$.ajaxSetup({

type: 'GET',
    url: 'http://www.example.com/ajax',
dataType: 'json'
});

ajax调用未成功或出错！在Chrome控制台中，我得到了这个：

未捕获的TypeError：非法调用

Answer 1

尝试使用preventDefault()：

$('#addHotlinkForm').live('submit', function(event) { // add 'event' here

var hotlinkName = $('#hotlinkName').val();
if (hotlinkName.length == 0) {

    return false;
}
else {

    $.ajax({data: {hotlinkName: hotlinkName, hotlinkURL: pageURL},
                success: function(response) {

            alert('Yay!');
        }   
    });
}
event.preventDefault(); // and add in this line
return false;
});

Answer 2

live()方法附加到父组件，位于DOM层次结构的高处。在您达到live()功能之前很久就会触发默认行为，因为在长时间冒泡过程后会触发live()。

唯一真正的解决方案是确保默认行为是无操作。您可以通过将表单的href更改为javascript:void(0);来完成此操作。

<强>更新

您的代码在此JSFiddle上触发警报：http://jsfiddle.net/vD2pz/我唯一能想到的是addHotLink通过重复创建具有重复ID字段的表单来创建无效代码，这是无效的。< / p>

jquery阻止表单提交ajax请求？

2 个答案: