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

I had a similar problem with a button that was added in dynamically. Three issues were at play:

1) The first as suggested by Jude Duran above was to change from a button to an input

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

2) I then used the .bind function instead of click event

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

3) The final element was I needed (as above) to explicitly declare the event object in the eventhandler "function(event)". In Chrome the object event seemed to automatically exist (i.e. even with "function()" an object event existed whose attributes I could query, while in FF I had to declare it explicitly.

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

Hope this helps others running into this mysterious issue.

Answer 2

Firefox was reading the button press as a form submit, even though I never bound the button click to .submit. The solution was easy, it just took forever to SEE the problem.

Answer 3

There might be two reasons for it

Your code is not executed on ready
When the click event registration code is executed the dom is not properly loaded
solution
Move the code to ready

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

Your html is dynamically creaded to loaded using load() solution
Use event propagation based event handler

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

Answer 4

try using on() instead of click()

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

Answer 5

JS Fiddle - http://jsfiddle.net/m9jKV/3/

Where is the Team object?

where are these html attributes that you want to get the values? $("#businessSizeSelect").val();

Ideally these objects needs to be nested inside a form

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