CODEWITHSUNDEEP
javascriptjqueryajax
Voldemar Duletskiy
Voldemar Duletskiy

Reputation: 981

Onclick event doesn't handle in Chrome, but work fine in Firefox

I have hand-made autocomplete ajax form, and here is code. Field with id "city" handles city and suggest cities starting with value of input form 

$(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);
    })

});

Problem is that onclick event doesn't work in Chrome, but works fine in Firefox and Opera:

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

Anybody had same problems?

Upvotes: 0

Views: 365

Answers (2)

ramby
ramby

Reputation: 96

try quote the text inside alert()

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

Upvotes: 0

Swiffy
Swiffy

Reputation: 4693

It's probably not the best way to "inject" javascript like that with append. After you've appended the li-element, you could bind the onclick-event afterwards.

Upvotes: 0

Related Questions