Chrome无法处理Onclick事件，但在Firefox中可以正常运行

Question

我有手工制作的自动完成ajax表单，这是代码。 ID为“ city”的字段处理城市并以输入表单的值开头来建议城市

$(document).ready(function () {
    var input_field = $("#city");
    $("#city").keypress(function () {
        setTimeout(function() {
            var city_name = input_field.val()
            $.ajax({
                type: "GET",
                url: "<%=cities_autocomplete_path%>",
                data: {city_start_with:city_name}
            }).success(function (data) {
                $("#city_results").empty();
                if (data.length==0)
                    $("#city_results").hide();
                else
                {
                    $("#city_results").show()

                    for(var idx in data)
                        $("#city_results").append('<li onclick="alert(23123123);return false;" class="city_result" id="city_result_123"><span><a >test</a></span></li>');

                }
            });
        },500);
    })

});

问题是onclick事件在Chrome中不起作用，但在Firefox和Opera中正常运行：

 $("#city_results").append('<li onclick="alert(23123123);return false;" class="city_result" id="city_result_123"><span><a >test</a></span></li>');

有人有同样的问题吗？

Answer 1

这可能不是用append“注入” javascript的最佳方法。 附加完li-元素后，可以随后绑定onclick-event。

Answer 2

尝试引用alert（）中的文本

 $("#city_results").append('<li onclick="alert('23123123');return false;" class="city_result" id="city_result_123"><span><a >test</a></span></li>');