Question

我们正在使用http://jscolor.com（JavaScript颜色选择器），通常没有任何问题。但是当我们通过AJAX创建输入元素时，它无法正常工作，并且jscolor.js无法检测输入的类（颜色），而输入显示正确。我们该怎么做？

HTML代码为：

<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;
    }
  }
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>

我们对ajax的PHP响应是：echo "<input class=\"color\" type=\"text\" value=\"66ff00\">";

Answer 1

我认为，在DOM加载后创建新的document元素时，您应该在创建该元素之后绑定事件。

答案的更新部分 请参阅此HTML和脚本：

<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');
                });
            }
        });
    });

但正确的方法是在创建event元素后添加DOM，如下所示：

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

更新第2部分

您应该初始化新的jscolor实例，例如使用此代码

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

创建自己的元素后。

更新第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>

如果有帮助，请将其标记为答案。

由AJAX创建的“input”元素无法通过其他javascript检测到？

1 个答案: