我正在使用在此link找到的jQuery对话框,我试图用onClick事件打开它,而不是使用按钮。它适用于Firefox和Chrome,但不适用于IE。如果你去我的测试网站并点击左上角(第一个)框,你会看到它在FF和Chrome中显示一个对话框,但在IE8或IE9中没有选择“手”光标。 http://calmaps.co.calumet.wi.us/datapopuptest.html 我不擅长JavaScript,但我只是使用一个例子,所以我没有编写代码,只是改变了一些文本来满足我的需求。
我试图在html中调用javascript:
$( "#request-data" )
//.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
我的html调用javascript:
<a id="request-data" title="Municipal Boundary Data" onclick= "$('#request-data').click(function() {$('#dialog-form').dialog('open');
return false;})" href="PleaseEnableJavascript.html"><img src="img/muni.png" alt="Calumet Municipal Boundaries" /></a>
就像我说的,这适用于Chrome和Firefox,但我在IE中什么都没有,没有错误,只是没有。我花了一天时间研究这个问题,我希望能得到一些见解。谢谢!
答案 0 :(得分:2)
鉴于在onclick
中您正在为元素定义click handler(例如,当您单击它时,您告诉它在单击时要执行的操作),它可以在<第一次点击它时,em>任何浏览器都是Postel定律的证明。
您可以更改onclick以执行您需要的操作:
onclick= "$('#dialog-form').dialog('open') ..
或者让它调用函数:
function showDialog() { .. }
onclick= "showDialog()"
或者您可以在document.ready
中分配点击处理程序,然后onclick
$(document).ready(function() {
$("#request-data").click(function() {
$("#dialog-form").dialog("open");
});
});
答案 1 :(得分:1)
这是相关部分:
$( "#create-user" )
.css('cursor','pointer') //some css for a pointer
.click(function(event) {
event.preventDefault();
$( "#dialog-form" ).dialog( "open" );
});
在这里你会找到js-fiddle:http://jsfiddle.net/JBqzU/
而且已经说过,没有必要在你的a-tag中加入内联j。
编辑:
在这里,你做了一些jslint标准,但我不认为这将解决问题中建议的问题,你必须贯穿你的整个js代码。我认为你有问题,因为测试小提琴的片段,即工作正常。
祝你好运。
$(function () {
"use strict";
var name = $("#name"),
email = $("#email"),
organization = $("#organization"),
allFields = $([]).add(name).add(email).add(organization),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function () {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Show Me The Data": function () {
var bValid = true;
allFields.removeClass("ui-state-error");
bValid = bValid && checkLength(name, "name", 3, 25);
bValid = bValid && checkLength(email, "email", 6, 80);
bValid = bValid && checkLength(organization, "organization", 5, 25);
bValid = bValid && checkRegexp(name, /^[a-z\-\s]+$/i, "Name may consist of letters only.");
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Email must be valid - eg. ui@jquery.com");
bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Email must be valid - eg. ui@jquery.com");
bValid = bValid && checkRegexp(organization, /^([0-9a-zA-Z\-\s])+$/, "Organization field only allows : a-z 0-9");
if (bValid) {
$("#users tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + organization.val() + "</td>" +
"</tr>");
location.href = "ftp://liouser:l!oguest1@ftp.co.calumet.wi.us/websitedata/CalumetBoundaries.zip";
$(this).dialog("close");
}
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
$("#request-data")
.css('cursor', 'pointer')
.click(function (event) {
event.preventDefault();
$("#dialog-form").dialog("open");
});
});
答案 2 :(得分:0)
使用jQuery的一个重点是,您可以在HTML中使用onclick
来定义点击事件。
$(...).click()
方法不适用于onclick
属性。
在$(document).ready()
函数中编写jQuery单击处理程序,并将其从HTML中删除。
希望有所帮助。