title: function in a loop - JQuery
body: <p>I tried to search a solution of my problem on StackOverflow but I didn't found. 
  I'm working on a script which wasn't made by me. The person who worked on it didn't use loop at all in JQuery. So I'm trying to re-write the code with loops.</p>
  
  <p>At the beggining, it was like this :</p>
  
  <pre>$(function() {
      $( "#dialog" ).dialog({
      width: 550,
        autoOpen: false,
      modal: true,
      dialogClass: "dialog_style1",
      open: function() {
          $(".ui-widget-overlay").bind("click",function(){
              $("#dialog").dialog("close");
          })
      }
      });
  
      $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open");
      });
    });
  
    $(function() {
      $( "#dialog1" ).dialog({
      width: 550,
        autoOpen: false,
      modal: true,
      dialogClass: "dialog_style1",
      open: function() {
          $(".ui-widget-overlay").bind("click",function(){
              $("#dialog1").dialog("close");
          })
      }
      });
  
      $( "#opener1" ).click(function() {
        $( "#dialog1" ).dialog( "open");
      });
    });
  
    $(function() {
      $( "#dialog2" ).dialog({
      width: 550,
        autoOpen: false,
      modal: true,
      dialogClass: "dialog_style1",
      open: function() {
          $(".ui-widget-overlay").bind("click",function(){
              $("#dialog2").dialog("close");
          })
      }
      });
  
      $( "#opener2" ).click(function() {
        $( "#dialog2" ).dialog( "open");
      });
    });</pre>
  
  <p>So it's the same function for different objects. Actually, there is 10 more time the same code ^^. That's why I tried to use a loop: while. So I rewrite the whole code to obtain this one :</p>
  
  <pre><code>var i = 0 ;
  while(i&lt;12){
  
      $(function() {
          var dial = "";
          if(i != 0){ dial = "#dialog"+i; }else{ dial = "#dialog";}
          var opener = "";
          if(i != 0){ opener = "#opener"+i; }else{ opener = "#opener";}
  
          $(dial).dialog({
          width: 550,
            autoOpen: false,
          modal: true,
          dialogClass: "dialog_style1",
          open: function() {
              $(".ui-widget-overlay").bind("click",function(){
                  $(dial).dialog("close");
              })
          }
          });
  
          $( opener ).click(function() {
            $( dial ).dialog( "open");
          });
      });
  
      i++;
  }
  </code></pre>
  
  <p>I think it's going to be simple later to use loops. So I thought this would do the exact same instructions. The problem is that it doesn't work at all. I have no idea about solution to my code. Maybe it's due to a problem of dynamic created function in the while...</p>
  
  <p>Thanks for reading and I wait for your help :)</p>