یک بارفراخوانی کردن رویداد در jQuery

در این مقاله یاد می گیریم که تنها یک رویداد را در jQuery اجرا کنیم. این یک نمونه کد ساده از تابع ()one جی کوئری می باشد.

همان طور که همه شما می دانید ما می توانیم رویدادهای زیادی را از سمت کاربر توسط jQuery مدیریت کنیم. در اینجا ما یکی از آن رویدادها را با شما به اشتراک گذاشتیم که قطعا یک روزی در برنامه شما مفید می باشد.

با شروع بارگذاری منبع (reference) جی کوئری ما از گوگل CDN در اینجا استفاده خواهیم کرد.

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

در حال حاضر یک تگ <P> ایجاد کنید .

<p>Click Me</p>

در مرحله بعدی Style تگ p را اضافه کنید :

p {   
   color: red;   
   width: auto;   
   height: 50px;   
   margin: 250px;   
   border: 1px solid #ccc;   
   padding: 25px;   
   text-align: center;   
}

حالا کدنویسی جی کوئری را شروع می کنیم . برای انجام این کار ما یک رویداد آماده خواهیم ساخت و بر روی رویداد کلیک می کنیم .

<script>   
   $(document).ready(function(){   
      $("p").one( "click", function() {   
         $(this ).text("You clicked me!. Now you can't do anything!!!!");   
      });   
   });   
</script>

کاری که این تابع انجام می دهد این است که تضمین می کند که عناصر(element)رویداد کلیک ،فقط یک باراجرا شده است.

کد کامل :

<html>  
    <head>  
        <title>JQuery one demo - Sibeesh Passion</title>  
        <style>   
            p {   
              color: red;   
              width: auto;   
              height: 50px;   
              margin: 250px;   
              border: 1px solid #ccc;   
              padding: 25px;   
             text-align: center;   
            }   
      </style>  
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  
    </head>  
    <body>  
        <p>Click Me</p>  
        <script>   
$(document).ready(function(){   
    $("p").one( "click", function() {   
        $(this ).text("You clicked me!. Now you can't do anything!!!!");   
    });   
});   
</script>  
    </body>  
</html>

خروجی برنامه :