"input" element that created by AJAX can't detect by another javascript?

Question

I think, when you create new DOM element after documentload, you should bind the event's after where you create that's element.

UPDATED PART OF ANSWER See this html and script:

<div id="container"></div>

$(document).ready(function () {
        // if you add the event for element that currenlty not exist on
        // page, and later may be created, the even cannot fired
        $('#elem').click(function () {
            alert('You are clicked on input!');
        });

        $.ajax({
            url: 'somePage.aspx',
            type: 'POST',
            contentType: 'application;json/ charset=utf-8',
            dataType: 'json',
            data: {},
            success: function (msg) {

                // if you create your own element here
                $('#container').append(function () {
                    return $('<span>')
                        .text('This Is New Element')
                        .attr('id', '#elem');
                });
            }
        });
    });

But the correct way is to add event after where DOM element is created, as you see below:

    $(document).ready(function () {
        $.ajax({
            url: 'somePage.aspx',
            type: 'POST',
            contentType: 'application;json/ charset=utf-8',
            dataType: 'json',
            data: {},
            success: function (msg) {

                // if you create your own element here
                $('#container').append(function () {
                    return $('<span>')
                        .text('This Is New Element')
                        .attr('id', '#elem')
                        .click(function () { // you should bind your events here
                            alert('You are clicked on input!');
                        });
                });
            }
        });
    });

UPDATED PART 2

you should initialize the new jscolor instance, for example use this code

new jscolor.color($('.color'), {});

after you created your own element.

UPDATED PART 3

<html>
<head>

    <script src='/js/jscloro.js'></script>
    <script>
        function showHint(str) {
            if (str.length == 0) {
                document.getElementById("txtHint").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;

                    /* YOU SHOULD INITIALIZE THE NEW JSCOLOR INSTANCE HERE */
                     var myPicker = new jscolor.color(document.getElementById('myField1'), {})
                     myPicker.fromString('99FF33') // 
                    /**/
                }
            }
            xmlhttp.open("GET", "gethint.php?q=" + str, true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <a href="#" onclick="showHint('jscolorpicker')">FORM</a>

    <div id="txtHint"></div>

</body>
</html>

Please mark it as answer if it helped you.