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

Question

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

这在Chrome中有效，但不适用于FF。

早些时候，我认为这只是PUT的问题，但实际上即使绑定中的console.log也无法触发。

您可以在此处查看先前的讨论：

为什么这个jQuery AJAX PUT可以在Chrome中运行但不能在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
    });
});

这是团队对象：

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

即使我从未将按钮单击绑定到.submit，Firefox仍将按钮按下作为表单提交进行阅读。 解决方案很容易，只是花了很长时间才发现问题。

Answer 2

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

团队对象在哪里？

您要在哪里获取这些html属性的值？ $（“＃businessSizeSelect”）。val（）;

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

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

Answer 3

尝试使用on（）代替click（）

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

Answer 4

可能有两个原因

您的代码未ready执行
当执行点击事件注册代码时，dom未正确加载
解
ready代码

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

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

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

Answer 5

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

1）上面裘德·杜兰（Jude Duran）提出的第一个建议是从按钮更改为输入

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

2）然后我使用.bind函数代替click事件

$('[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
}

希望这可以帮助其他人遇到这个神秘的问题。