have jquery only run once [duplicate]_问答_开发者

This question already has an answer here: Closed 11 years ago.

Possible Duplicate:
Stop jquery from repeating, example attached

I am attaching a query to my order to produce a bar code. The code has to be attached to each order individually. When we print our orders, they print in batches and the code appears more then once. On each instance it runs and produces multiple copies of the bar code. I have tried stopping it, but cannot seem to get it to work. can someone please send a suggestion. I know having it only once is ideal, but not possible from the site I am working with.

 <script>
 $('font[size="3"] b:not(.dont_run)').addClass('barcode_needed');

  $('b.barcode_needed').each(function() {
   $(this).append('     <div class="bcTarget">');
  });

  $('.bcTarget').each(function() {
    $(this).barcode('G' + $(this).closest('b.barcode_needed').text(),'code128');
    $(this).removeClass('bcTarget');       
    $(this).closest('b.barcode_needed').removeClass('barcode_needed').addClass('dont_run');
  });    
 </script>

Below is the entire code:

 <html>
 <head>
 <link href="/v/vspfiles/templates/ZuluLAX/css/Colors.css" rel="stylesheet" type="text/css">
 <link href="/v/vspfiles/templates/ZuluLAX/css/Content_Area.css" rel="stylesheet" type="text/css">

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 </head>
 <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="">

 <style type=text/css>
 BODY {
FONT: 11px Verdana; COLOR: #000000; letter-spacing: -0.1em;
 }
 TABLE {
FONT: 11px Verdana; COLOR: #000000; letter-spacing: -0.1em;
 }
 TD {
FONT: 11px Verdana; COLOR: #000000; letter-spacing: -0.1em;
 }
 .pos_receipt td {
font-family: "Courier New", Courier, monospace;
 }
 span.WarehouseLocation
 {
 width:50px;
 border-bottom-color: black;
 border-bottom-style: dashed;
 border-bottom-width: 1px;
 }
 </style>

 <table cellpadding=0 cellspacing=0 width="100%" align="center" style="page-break-after:always;">
   <tr> 
     <td align="center"> 
       <table cellpadding=0 cellspacing=0 width=600>

         <tr> 
           <td width="100%"> 
             <table width="600" border="0" cellspacing="0" cellpadding="0">
               <tr> 
                 <td width="400">

                 <img src="v/vspfiles/templates/ZuluLAX/images/company/logo.jpg">
                 <div id="div_articleid_86">
 </div>

                 </td>
                 <td width="200" align="right"> 
                   <table width=180 border=0 cellpadding=0 cellspacing=0>


                     <tr> 
                       <td width=90 align=left colspan="2">     <b>     <font style="font-size:18px;font-weight:bold;">PACKING SLIP     </font>     </b>     </td>
                     </tr>

                     <tr> 
                       <td width=90 align=left>     <b>Date:     </b>     </td>
                       <td width=90>     <b>Order#:     </b>     </td>
                     </tr>
                     <tr> 
                       <td width=75 align=left> 06/09/2011      </td>

                       <td>     <font size=3>     <b>10196     </b>     </font>     </td>
                     </tr>
                   </table>
                 </td>
               </tr>
             </table>
           </td>
         </tr>

         <tr> 
           <td width="100%">     <img src='/clear1x1.gif' width='1' height='1' border=0>     </td>
         </tr>
       </table>


 <script type="text/javascript" src="http://zululax.com/v/vspfiles/templates/ZuluLAX/js/jquery.js">     </script>
     <script type="text/javascript" src="http://zululax.com/v/vspfiles/templates/ZuluLAX/js/jquery-barcode-2.0.2.min.js">     </script>


 <script>
 $('font[size="3"] b:not(.dont_run)').addClass('barcode_needed');

  $('b.barcode_needed').each(function() {
   $(this).append('     <div class="bcTarget">');
  });

  $('.bcTarget').each(function() {
    $(this).barcode('G' + $(this).closest('b.barcode_needed').text(),'code128');
    $(this).removeClass('bcTarget');       
    $(this).closest('b.barcode_needed').removeClass('barcode_needed').addClass('dont_run');
  });    
 </script>

 </div>

    </td>
   </tr>
 </table>

 <table cellpadding=0 cellspacing=0 width="100%" align="center" style="page-break-after:always;">
   <tr> 
     <td align="center"> 
       <table cellpadding=0 cellspacing=0 width=600>
         <tr> 
           <td width="100%"> 
             <table width="600" border="0" cellspacing="0" cellpadding="0">
               <tr> 
                 <td width="400">

                 <img src="v/vspfiles/templates/ZuluLAX/images/company/logo.jpg">
                 <div id="div_articleid_86">

 </div>

     开发者_Python百科            </td>
                 <td width="200" align="right"> 
                   <table width=180 border=0 cellpadding=0 cellspacing=0>

                     <tr> 
                       <td width=90 align=left colspan="2">     <b>     <font style="font-size:18px;font-weight:bold;">PACKING SLIP     </font>     </b>     </td>
                     </tr>

                     <tr> 
                       <td width=90 align=left>     <b>Date:     </b>     </td>

                       <td width=90>     <b>Order#:     </b>     </td>
                     </tr>
                     <tr> 
                       <td width=75 align=left> 06/09/2011      </td>
                       <td>     <font size=3>     <b>10197     </b>     </font>     </td>
                     </tr>
                   </table>

                 </td>
               </tr>
             </table>
           </td>
         </tr>
         <tr> 
           <td width="100%">     <img src='/clear1x1.gif' width='1' height='1' border=0>     </td>
         </tr>
       </table>



 <script type="text/javascript" src="http://zululax.com/v/vspfiles/templates/ZuluLAX/js/jquery.js">     </script>
     <script type="text/javascript" src="http://zululax.com/v/vspfiles/templates/ZuluLAX/js/jquery-barcode-2.0.2.min.js">     </script>


 <script>
 $('font[size="3"] b:not(.dont_run)').addClass('barcode_needed');

  $('b.barcode_needed').each(function() {
   $(this).append('     <div class="bcTarget">');
  });

  $('.bcTarget').each(function() {
    $(this).barcode('G' + $(this).closest('b.barcode_needed').text(),'code128');
    $(this).removeClass('bcTarget');       
    $(this).closest('b.barcode_needed').removeClass('barcode_needed').addClass('dont_run');
  });    
 </script>
 </div>

    </td>
   </tr>
 </table>

 <table cellpadding=0 cellspacing=0 width="100%" align="center" style="page-break-after:always;">
   <tr> 
     <td align="center"> 
       <table cellpadding=0 cellspacing=0 width=600>
         <tr> 
           <td width="100%"> 
             <table width="600" border="0" cellspacing="0" cellpadding="0">
               <tr> 
                 <td width="400">

                 <img src="v/vspfiles/templates/ZuluLAX/images/company/logo.jpg">
                 <div id="div_articleid_86">

 </div>

                 </td>
                 <td width="200" align="right"> 
                   <table width=180 border=0 cellpadding=0 cellspacing=0>

                     <tr> 
                       <td width=90 align=left colspan="2">     <b>     <font style="font-size:18px;font-weight:bold;">PACKING SLIP     </font>     </b>     </td>
                     </tr>

                     <tr> 
                       <td width=90 align=left>     <b>Date:     </b>     </td>

                       <td width=90>     <b>Order#:     </b>     </td>
                     </tr>
                     <tr> 
                       <td width=75 align=left> 06/09/2011      </td>
                       <td>     <font size=3>     <b>10198     </b>     </font>     </td>
                     </tr>
                   </table>

                 </td>
               </tr>
             </table>
           </td>
         </tr>
         <tr> 
           <td width="100%">     <img src='/clear1x1.gif' width='1' height='1' border=0>     </td>
         </tr>
       </table>



 <script type="text/javascript" src="http://zululax.com/v/vspfiles/templates/ZuluLAX/js/jquery.js">     </script>
     <script type="text/javascript" src="http://zululax.com/v/vspfiles/templates/ZuluLAX/js/jquery-barcode-2.0.2.min.js">     </script>


 <script>
 $('font[size="3"] b:not(.dont_run)').addClass('barcode_needed');

  $('b.barcode_needed').each(function() {
   $(this).append('     <div class="bcTarget">');
  });

  $('.bcTarget').each(function() {
    $(this).barcode('G' + $(this).closest('b.barcode_needed').text(),'code128');
    $(this).removeClass('bcTarget');       
    $(this).closest('b.barcode_needed').removeClass('barcode_needed').addClass('dont_run');
  });    
 </script>
 </div>

    </td>
   </tr>
 </table>

 </body>
 </html>

I assume that the problem is caused by the multiplied script code. If it is so, then:

The easiest solution is to put your code into document.redy

$(document).ready(function(){
    //your script code
});

and place it in an external file which would be load in the page:

<script type="javascript/text" src="Source of the file with your document.ready function" />

Recently had the same problem. The solution was a check for an element or class: does it exist or not? For example, I see .bcTarget is appended to .barcode_needed. So you can check like this:

$('b.barcode_needed').each(function() {
  // if .bcTarget does not exist within current .barcode_needed, let's append
  if ( !$(this).contents().is('.bcTarget') )
    $(this).append('<div class="bcTarget"></div>');
});

Hope, you've caught the idea.