Question

这个jQuery有什么问题（参见JS Fiddle：fiddle）。点击事件不会触发。它必须是简单的东西，但我看不到它：

var form;
var submitting;
var submitBtn;

$(document).ready(function () {
    form = $("#form");
    submitting = $("#submitting");
    submitBtn = $("#submitBtn");

    // set the submitting div height to that of the form
    $(submitting).css("height", $(form).height());

    $(submitting).css("opacity", 0);

    //alert(submitBtn);

    // transition in when the button is clicked
    $(submitBtn).click(function (e) {
        e.preventDefault();

        alert("why don't I fire!");

        $(form).animate({
            opacity: 0
        }, 400);
    });
});

Answer 1

实际上用户无法点击按钮，因为div submitting与表单重叠。将div的位置更改为relative，然后它将正常工作

#submitting {
    display:table;
    position:relative;
    top:0
}

Fiddle

Answer 2

工作正常。从此元素中删除top:0

#submitting {
    display:table;
    position:absolute;
    /*top:0;*/
}

fiddle

这是因为submitting元素与您的#form元素重叠。这可以修复，同时使submitting为负z-index：

#submitting {
  display: table;
  position: absolute;
  top: 0;
  z-index: -1;
}

就像这个例子fiddle

JS Fiddle jQuery Click Event Not Firing

2 个答案: