0

我正在使用在此链接上找到的 jQuery 对话框， 我试图通过 onClick 事件打开它，而不是使用按钮。它适用于 Firefox 和 Chrome，但不适用于 IE。如果你去我的测试站点并单击左上角（第一个）框，你会看到它在 FF 和 Chrome 中弹出一个对话框，但在 IE8 或 IE9 中没有选择“手”光标。 http://calmaps.co.calumet.wi.us/datapopuptest.html 我对JavaScript不精通，但我只是在使用一个例子，所以我没有写代码，只是改变了一些文字以满足我的需要.

javascript 我试图在 html 中调用：

$( "#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 中什么也没有，没有错误，什么也没有。我花了一天时间研究这个问题，我希望我能得到一些见解。谢谢！

4

3 回答 3

2

鉴于onclick您正在为元素定义点击处理程序（即，当您单击它时，您会告诉它在单击它时要做什么），它在您第一次单击它时在任何浏览器中工作的事实证明了波斯特尔定律。

您可以更改 onclick 以执行您需要的操作：

onclick= "$('#dialog-form').dialog('open') ..

或者让它调用一个函数：

function showDialog() { .. }

onclick= "showDialog()"

或者你可以只在 中分配点击处理程序document.ready，然后你不需要任何东西onclick

$(document).ready(function() {
  $("#request-data").click(function() {
        $("#dialog-form").dialog("open");
     });
});
于 2013-03-22T13:53:43.450 回答
1

stuartd 已经指出了不同的解决方案，我为您创建了一个 js fiddle，并提出了一个建议，以避免默认的单击功能。

这是相关部分：

$( "#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/

并且已经说过，没有必要将内联 js 包含到您的 a-tag 中。

编辑：

在这里，您做了一些 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");
        });
});
于 2013-03-22T14:18:07.080 回答
0

使用 jQuery 的全部要点之一是您可以在不使用onclickHTML 的情况下定义您的点击事件。

该$(...).click()方法不适用于onclick属性内部。

在您的函数中编写 jQuery click 处理程序$(document).ready()并将其从 HTML 中取出。

希望有帮助。

于 2013-03-22T13:56:58.560 回答