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

It works in Chrome, JS is not disabled, this code block is inside document.ready() — Lurk21, Jun 05 '13 at 02:33
@LynnOwens in your browser console can you type `("#createTeamButton")` and see what is retunrned? is it return the element — Arun P Johny, Jun 06 '13 at 00:40
Firebug returned this, in red, ""#createTeamButton"" ... Same thing happened in Chrome. Never did this before. What was it supposed to do? — Lurk21, Jun 06 '13 at 02:37
Neat, I did not realize that I could run javascript directly in the console. — Lurk21, Jun 06 '13 at 02:42
Does the console return any errors in Firefox when you attempt a click? — Chris Barr, Jun 06 '13 at 02:52
No, Hey i just figured it out. Yay!!!!!! Thank you everyone for helping me along the way! I'll post an answer. — Lurk21, Jun 06 '13 at 02:56

score 2 · Accepted Answer · answered Jun 06 '13 at 02:57

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.

answered Jun 06 '13 at 02:57

Lurk21

2,307
12
37
55

This isn't an answer to the question. – bcr666 May 05 '20 at 21:06

score 1 · Answer 2 · answered Jun 05 '13 at 02:15

1

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>

answered Jun 05 '13 at 02:15

Sanath

4,774
10
51
81

actually click gets triggered. use firebug to debug and you can see the following error ReferenceError: Team is not defined [Break On This Error] var teamObject = new Team(); – Sanath Jun 05 '13 at 02:29
Team is loaded in another source file, I'll edit the question to include it. – Lurk21 Jun 05 '13 at 02:34
http://jsfiddle.net/m9jKV/7/ look at the fiddle..error handler was modified ..request type has to be POST not Put...and it is posting now... – Sanath Jun 05 '13 at 05:02
1

I removed my error handler and the issue was not resolved. And because I'm communicating with a restful api, the request type must be put. – Lurk21 Jun 05 '13 at 13:57

Jude Duran · Answer 3 · 2013-06-05T02:21:40.933

1

try using on() instead of click()

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

edited Jun 05 '13 at 02:21

answered Jun 05 '13 at 02:16

Jude Duran

2,195
2
25
41

score 1 · Answer 4 · answered Jun 05 '13 at 02:35

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(){
    ....
})

score 1 · Answer 5 · answered Apr 22 '18 at 16:29

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.

jQuery clicking event not working at all in Firefox

5 Answers5