javascript - jQuery clicking event not working at all in Firefox

Question

This problem has been a thorn in my side for a month now. If anyone can figure it out, I'd be very, very, very thankful.

This works in Chrome but not FF.

Earlier I thought this was a problem just with PUT, but in fact even console.log in this binding is not firing.

You can see the previous discussion here:

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

Here's a good deal of the surrounding 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>

Here's the javascript. This is nested within 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
    });
});

Here is the Team object:

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

If I fill in the team fields and then run the createTeamButton.click() event in the console, then a PUT request is recorded in the console, but it is red and I do not see it in Fiddler. These are the request headers:

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 

I do, however, see the referer in Fiddler as a GET request:

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

I'm using jQuery 2.0.0

Answer 1

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

Answer 2

可能有两个原因

你的代码没有执行ready
当点击事件注册代码执行时dom没有正确加载
解决方法
把代码移到ready

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

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

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

Answer 3

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

Team 对象在哪里？

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

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

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

Answer 4

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

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

Answer 5

我在动态添加的按钮上遇到了类似的问题。三个问题在起作用：

1）上面裘德杜兰建议的第一个是从按钮更改为输入

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

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

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