Internet explorer only executing function inside jQuery ajax success response once even though there are three requests_问答_开发者

I have a function that uses jQuery.load() to call in 3 snippets of forms from different pages and then on the success text status it tries to load a colour picker:

$(document).ready(function() {

    function ajax_form(putloadingboxhere, putsnippethere, snippeturl) {

        $(putsnippethere).load(snippeturl, function (responseText, textStatus, XMLHttpRequest, ) {
            if (textStatus == "success") {
                alert('One')
                $("input.pickcolor").ColorPicker({
                    onShow: function (colpkr) {
                        $(colpkr).fadeIn(500);
                        return false;
                    },
                    onSubmit: function(hsb, hex, rgb, el) {
                        $(el).val(hex);
                        $(el).ColorPickerHide();
                        $(el).siblings('.colorpreview').css('background-color', '#' + hex);
                    },
                    onBeforeShow: function () {
                        $(this).ColorPickerSetColor(this.value);
                    }
                })
                .bind('keyup', function(){
    开发者_Go百科                $(this).ColorPickerSetColor(this.value);
                });  

                alert('Two')
            }
            if (textStatus == "error") {
                // Show error message
            }
        });
    }

    ajax_form('tab_box', '#formone', 'snippet_one.htm #snippet');
    ajax_form('tab_box', '#formtwo', 'snippet_two_copy.htm #snippet');
    ajax_form('tab_box', '#formthree', 'snippet_three.htm #snippet');
});

It works fine in Firefox and Safari but (surprise, surprise) IE has a problem with it. I have added an alert to see what is going on before and after one of the functions.

FF & Safari & IE8: Alert 'one' and Alert 'two' appear three times as expected and colour picker appears. IE6 & 7: Alert 'one' shows three times and colour picker does not appear.

Any help would be great! Cheers.

EDIT

The line IE is referring to when it throws this error: 'Error: Object doesn't support this property or method.' is:

$('input.pickcolor').ColorPicker

Anyone got any insights? Thanks

Have you tied ".live" instead of ".bind"?

I just test the script and the only problem I had is that the function "load" has a comma in the last parameter, It works fine in IE6 and IE7.

$(putsnippethere).load(snippeturl, function (responseText, textStatus, XMLHttpRequest, )

Update all script:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
  <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/colorpicker.js"></script>
  <script type="text/javascript" src="js/eye.js"></script>
  <script type="text/javascript" src="js/utils.js"></script>
  <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
    <title>load</title>
</head>
<body>

    <div id="formone"></div>
    <div id="formtwo"></div>
    <div id="formthree"></div>

    <input id="i1" class="pickcolor" type="text" /><br />
    <input id="i2" class="pickcolor" type="text" /><br />
    <input id="i3" class="pickcolor" type="text" /><br />

    <pre style="text-align:left;width:600px;" id="mydebug"></pre>

</body>
</html>
<script>
$(function() {

    addDebug = function(text){
        $("#mydebug").append(text+"<br />");
    }

  function ajax_form(putloadingboxhere, putsnippethere, snippeturl) {

    $(putsnippethere).load(snippeturl, function (responseText, textStatus, XMLHttpRequest) {
      if (textStatus == "success") {

          addDebug(putsnippethere  + " :: One");

          var lstElPickcolor = $("input.pickcolor");

          addDebug(putsnippethere  + " :: Length inputs : " + lstElPickcolor.length);

          $.each(lstElPickcolor, function(i, val){

              addDebug(putsnippethere  + " :: add ColorPicker for input.id=" + $(val).attr('id'));
                        $(val).ColorPicker({

                  onShow: function (colpkr) {
                      $(colpkr).fadeIn(500);
                      return false;
                  },

                  onSubmit: function(hsb, hex, rgb, xel) {
                      $(xel).val(hex);
                      $(xel).ColorPickerHide();
                      $(xel).siblings('.colorpreview').css('background-color', '#' + hex);
                  },

                  onBeforeShow: function () {
                      $(this).ColorPickerSetColor(this.value);
                  }
              });

              addDebug(putsnippethere  + " :: unbind event keyup for input.id=" + $(val).attr('id'));
              $(val).unbind('keyup');

              addDebug(putsnippethere  + " :: bind event keyup for input.id=" + $(val).attr('id'));
              $(val).bind('keyup', function(){
                  $(this).ColorPickerSetColor(this.value);
              });               

          });

          addDebug(putsnippethere  + " :: Two");
          addDebug(" ");
      }

      if (textStatus == "error") {
          // Show error message
      }

    });
  }

  ajax_form('tab_box', '#formone', 'snippet_one.htm #snippet');
  ajax_form('tab_box', '#formtwo', 'snippet_two_copy.htm #snippet');
  ajax_form('tab_box', '#formthree', 'snippet_three.htm #snippet');

});
</script>