jQuery单击事件在Firefox中根本不起作用

Question

这个问题已经困扰我一个月了。如果有人能弄清楚，我会非常非常非常感谢。

这适用于 Chrome，但不适用于 FF。

之前我认为这只是 PUT 的问题，但实际上即使是这个绑定中的 console.log 也没有触发。

你可以在这里看到之前的讨论：

Why does this jQuery AJAX PUT work in Chrome but not FF

这里有很多周围的 HTML：

<div id="createTeamModal" class="small reveal-modal">
    <form id="createTeamForm">
        <div class="row"><p id="teamFlavorText" class="lead">Building a new team</p></div>
        <div class="row">
            <div class="small-4 large-4 columns"><label>Team Name:</label></div>
            <div class="small-6 large-6 columns"><input name="teamName" id="teamName" type="text" size="20"/></div>
        </div>
        <div class="row"><p class="lead">Does this team work for a business?</p></div>
        <div class="row">
            <div class="small-4 large-4 columns"><label>Business Size:</label></div>
            <div class="small-6 large-6 columns">
                <select id="businessSizeSelect" name="businessSizeSelect">
                <%
                    Info[] sizes = is.getList("business_sizes");
                    for (Info size : sizes) {
                        out.print("<option value=\"" + size.getId() + "\">" + size.getDescription() + "</option>");
                    }
                %>
                </select>
            </div>
        </div>
        <div id="businessLocationDiv" class="row" style="display: none; margin-top: 20px;">
            <div class="small-4 large-4 columns"><label>Business Location:</label></div>
            <div class="small-6 large-6 columns">
                <select id="businessLocationSelect" name="businessLocationSelect">
                <%
                    Info[] locations = is.getList("business_locations");
                    for (Info location : locations) {
                        out.print("<option value=\"" + location.getId() + "\">" + location.getDescription() + "</option>");
                    }
                %>
                </select>
            </div>
        </div>
        <div id="businessTypeDiv" class="row" style="display: none; margin-top: 20px;">
            <div class="small-4 large-4 columns"><label>Industry:</label></div>
            <div class="small-6 large-6 columns">
                <select id="businessTypeSelect" name="businessTypeSelect">
                <%
                    Info[] types = is.getList("business_types");
                    for (Info type : types) {
                        out.print("<option value=\"" + type.getId() + "\">" + type.getDescription() + "</option>");
                    }
                %>                      
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 20px;">
            <div class="large-offset-10 small-1 large-1 columns">
                <button id="createTeamButton" class="small button">Create</button>
            </div>
        </div>
    </form>
    <a class="close-reveal-modal">&#215;</a>
</div>

这里是javascript。这嵌套在 document.ready() 中。

$("#createTeamButton").click(function () {
    console.log("here");
    window.alert("here");
    var teamObject = new Team();
    teamObject.description = $("#teamName").val();
    teamObject.businessSize = $("#businessSizeSelect").val();
    teamObject.businessType = $("#businessTypeSelect").val();
    teamObject.businessLocation = $("#businessLocationSelect").val();

    console.log("There");

    $.ajax({
        type: "PUT",
        url: "/ajax/rest/team",
        dataType: "json",
        data: JSON.stringify(teamObject),
        success: function () {
            // Reload the team select box
            loadTeamSelectBox();

            // Pop up the site create modal
            $('#createSiteModal').foundation('reveal', 'open');
        },
        error: ajaxErrorHandler
    });
});

这是 Team 对象：

function Team() {
    var id=0, description='', businessSize=0, businessType=0, businessLocation=0, invite="";
}

如果我填写团队字段，然后在控制台中运行 createTeamButton.click() 事件，那么控制台中会记录一个 PUT 请求，但它是红色的，我在 Fiddler 中看不到它。这些是请求标头：

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Length  88
Content-Type    application/x-www-form-urlencoded; charset=UTF-8
Cookie  JSESSIONID=-zZ0ZF6QtojQEfKoN2vLuFjx.undefined
Host    127.0.0.1:8080
Referer http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=2&businessLocationSelect=1&businessTypeSelect=1
User-Agent  Mozilla/5.0 (Windows NT 6.2; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0
X-Requested-With    XMLHttpRequest 

不过，我确实将 Fiddler 中的引用者视为 GET 请求：

GET http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=1&businessLocationSelect=1&businessTypeSelect=1 HTTP/1.1
Host: 127.0.0.1:8080
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=1&businessLocationSelect=1&businessTypeSelect=1
Cookie: JSESSIONID=-zZ0ZF6QtojQEfKoN2vLuFjx.undefined
Connection: keep-alive

我正在使用 jQuery 2.0.0

Answer 1

动态添加的按钮也有类似的问题。三个问题在起作用：

1) 上面 Jude Duran 建议的第一个是从按钮更改为输入

<input type='button' Value='Button' class='btnclass' myattribute='foobar' >

2) 然后我使用了 .bind 函数而不是点击事件

$('[id^=Compare]').bind("click", function (event) {
alert(event.attributes.myattribute,value);
// returns foobar
}

3) 我需要最后一个元素（如上所述）在事件处理程序“function(event)”中显式声明事件对象。在 Chrome 中，对象事件似乎自动存在（即即使使用“function()”，也存在我可以查询其属性的对象事件，而在 FF 中我必须明确声明它。

//Works in Chrome but not FF
$('[id^=Compare]').bind("click", function () {
alert(event.attributes.myattribute,value);
// returns foobar
}

希望这有助于其他人遇到这个神秘的问题。

Answer 2

Firefox 将按钮按下视为表单提交，尽管我从未将按钮单击绑定到 .submit。解决方案很简单，只是花了很长时间才发现问题。

Answer 3

可能有两个原因

您的代码未在ready上执行
执行点击事件注册代码时，dom未正确加载
解决方案
将代码移至ready

$(function(){
    $('#createTeamButton').click(function(){....})
})

您的 html 是使用 load() 动态创建加载的 解决方案
使用基于事件传播的事件处理程序

$(document).on('click', '#createTeamButton', function(){
    ....
})

Answer 4

尝试使用 on() 而不是 click()

$("#createTeamButton").on("click", function () {
 ///code
});

Answer 5

JS 小提琴 - http://jsfiddle.net/m9jKV/3/

Team 对象在哪里？

您想要获取值的这些 html 属性在哪里？ $("#businessSizeSelect").val();

理想情况下，这些对象需要嵌套在表单中

<form>
   <input type="text" id="teamName">
</form>