onClick事件和IE

时间:2013-03-22 13:49:52

标签: javascript jquery internet-explorer onclick

我正在使用在此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中什么都没有,没有错误,只是没有。我花了一天时间研究这个问题,我希望能得到一些见解。谢谢!

3 个答案:

答案 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)

stuartd已经指出了不同的解决方案,我为你创建了一个js小提琴,提出了一个避免默认点击功能的建议。

这是相关部分:

$( "#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中删除。

希望有所帮助。