جاوااسکریپت - چرا این تابع کلیک jQuery کار نمیکند؟

کد :

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

کد بالا کار نمیکند. وقتی روی #clicker کلیک میکنم، هیچ هشداری نمایش داده نمیشود و همچنین مخفی نمیشود. کنسول را بررسی کردم و هیچ خطایی ندارم. همچنین بررسی کردم که JQuery بارگذاری شده است و واقعاً بارگذاری شده است. بنابراین مطمئن نیستم مشکل کجاست. همچنین یک تابع document ready با یک هشدار نوشتم و آن کار کرد، بنابراین مطمئن نیستم چه کاری را اشتباه انجام میدهم. لطفاً کمک کنید. ممنون!

پاسخ شماره ۱

شما قرار است کد جاوااسکریپت را در یک بلوک $ (document).ready(function() {}); اضافه کنید.

یعنی

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

همانطور که مستندات jQuery بیان میکند: «تا زمانی که سند آماده نباشد، نمیتوان صفحه را به طور ایمن تغییر داد.» jQuery این حالت آمادگی را برای شما تشخیص میدهد. کدی که داخل $ ( document ).ready() قرار داده شده است فقط زمانی اجرا میشود که DOM صفحه برای اجرای کد جاوااسکریپت آماده باشد.

پاسخ شماره ۲

من بهترین راه حل برای این مشکل را با استفاده از ON با $ (document) پیدا کردم.

 $(document).on('click', '#yourid', function() { alert("hello"); });

برای شروع با شناسه، به موارد زیر مراجعه کنید:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

در نهایت بعد از یک هفته، دیگر نیازی به افزودن تریگر onclick ندارم. امیدوارم این به بسیاری از مردم کمک کند

پاسخ شماره ۳

کد شما ممکن است بدون document.ready() هم کار کند، فقط مطمئن شوید که اسکریپت شما بعد از #clicker قرار دارد. این دمو را بررسی کنید: http://jsbin.com/aPAsaZo/1/

ایده در مفهوم آماده است. اگر مطمئن هستید که اسکریپت شما جدیدترین چیز در صفحه شما است یا بعد از عنصر مورد تأثیر قرار گرفته است، کار خواهد کرد.

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

توجه: در دمو jsbin در کد، http را با https جایگزین کنید، یا از این نسخه دمو استفاده کنید