Question

我正在为一款名为Rail Baron的棋盘游戏创建一个简单的基于网络的查找工具。有两个文本输入连接到jQuery autoComplete，看起来效果很好。在输入的任何变化事件中，显示一个美元金额 - 表示两个城市之间旅行的收益。

change()事件处理程序在Firefox中调用，但不在其他浏览器中调用。在IE中不起作用，所以我不认为这是一个webkit问题。寻找解决方法或了解为什么会这样。 http://paislee.net/railbaron提供全面申请。谢谢！

依赖关系，已加载到<head>：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

相关标记：

<form id="payoffForm" action="#">
                <fieldset>
                    <legend>
                        <strong>Payoff Lookup</strong>
                    </legend>
                    <label for="from">From:</label>
                    <input id="from" type="text">
                    <label for="to">To:</label>
                    <input id="to" type="text">
                    <div id="result">$</div>
                </fieldset>             
            </form>

我的JavaScript，在关闭</body>标记之前加载：

<script type="text/javascript">
            var chart; // small csv file in memory

            // this updates the dollar amount displayed
            function updatePayoff() {

                var result;
                var from = $("#from").val();
                var to = $("#to").val();

                var from_i = chart[0].indexOf(from);
                var to_i = chart[0].indexOf(to);
                result = chart[to_i + 1][from_i] * 1000;

                $("#result").html( result ? "$" + result : "$");

            }

            // attach event handlers
            $("#from").change(function() {
                updatePayoff();
            });

            $("#to").change(function() {
                updatePayoff();
            });

            // entry point
            $(document).ready(function() {
                $.ajax({
                    url : "./payoffs.csv",
                    cache : false,
                    success : function(result) {
                        chart = CSVToArray(result);
                        $("#from").autocomplete({
                            source : chart[0]
                        });
                        $("#to").autocomplete({
                            source : chart[0]
                        });
                    }
                });
            });

            // parsing my csv file into autocomplete array
            function CSVToArray(strData, strDelimiter) {
                // ..implementation..
            }

</script>

http://paislee.net/railbaron提供完整的申请。谢谢！

Answer 1

您的input标签似乎未关闭。

<input id="to" type="text">

我认为这对某些（所有？）文档类型无效 - 尝试关闭它们并查看是否可以解决问题

<input id="to" type="text" />

您的脚本标记看起来像是在您的身体外，我认为这是无效的。尝试将其移至身体的结束，但仍然在里面。

Answer 2

这看起来非常类似于调整dom和运行点击/更改处理程序时遇到的问题。对我而言，.on() functionality解决了问题。仅供参考，.on()是.live()

的较新版本

Answer 3

查看jQuery UI Autocomplete的select回调。这是完全未经测试的，但试试这个：

        /* REMOVE
        $("#from").change(function() {
            updatePayoff();
        });

        $("#to").change(function() {
            updatePayoff();
        });
        */

        $(document).ready(function() {
            $.ajax({
                url : "./payoffs.csv",
                cache : false,
                success : function(result) {
                    chart = CSVToArray(result);
                    $("#from").autocomplete({
                        source : chart[0],
                        select: function() {
                            updatePayoff();
                        }
                    });
                    $("#to").autocomplete({
                        source : chart[0],
                        select: function() {
                            updatePayoff();
                        }
                    });
                }
            });
        });

jQuery事件处理程序仅适用于Firefox

3 个答案: