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

Firefox正在阅读按钮按下作为表单提交，即使我从未绑定按钮点击.submit。解决方案很简单，只需要花费很长时间来解决问题。

Answer 2

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

Team对象在哪里？

您希望获取值的这些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(){....})
})

使用load()动态地将html加载到加载状态解决方案
使用基于事件传播的事件处理程序

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

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

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

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

5 个答案: