0

このリンクにあるjQueryダイアログボックスを 使用していますが、ボタンを使用するのではなく、onClickイベントで開くようにしています。Firefox と Chrome では動作しますが、IE では動作しません。私のテスト サイトに移動して、左上 (最初のボックス) のボックスをクリックすると、FF と Chrome ではダイアログが表示されますが、IE8 または IE9 では「手」カーソルを選択できません。 http://calmaps.co.calumet.wi.us/datapopuptest.html 私は JavaScript に精通していませんが、例を使用しているだけなので、コードは記述せず、必要に応じてテキストの一部を変更しただけです.

HTMLで呼び出しようとしているjavascript im：

$( "#request-data" )
  //.button()
  .click(function() {
    $( "#dialog-form" ).dialog( "open" );
  });

JavaScriptを呼び出す私のhtml：

<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 では何も表示されず、エラーも何も表示されません。この問題の調査に 1 日を費やしましたが、何らかの洞察を得られることを願っています。ありがとう！

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 はすでにさまざまなソリューションを指摘しています。デフォルトのクリック機能を回避するための 1 つの提案を含む 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/

そして、すでに述べたように、インライン 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

onclickjQuery を使用する全体的なポイントの 1 つは、HTMLを使用せずにクリック イベントを定義できることです。

この$(...).click()メソッドは、onclick属性内で使用するためのものではありません。

関数に jQuery クリック ハンドラを記述し$(document).ready()、HTML から取り出します。

それが役立つことを願っています。

于 2013-03-22T13:56:58.560 に答える