javascript - জেএস এবং জিক্যুরি এইচটিএমএল উপাদানগুলি সনাক্ত করতে পারে না এবং বলে যে সেগুলি সংজ্ঞায়িত



jquery (3)

আমি জেএস এবং jQuery বেশ নতুন, এবং আমি তাদের ব্যবহার করে একটি সাবটাইটেল প্লেয়ার তৈরি করার চেষ্টা করছি। দুর্ভাগ্যক্রমে, আমি খুব প্রাথমিক পর্যায়ে আটকে আছি।

আমি যখন একটি জেএসএস ফাইলের মাধ্যমে কিছু HTML উপাদান নির্বাচন করার চেষ্টা করছি তখন এটি এমনভাবে কাজ করে যা আমি জিজ্ঞাসা করে এমন উপাদানটি সনাক্ত করতে পারে না এবং কিছুই ঘটে না। আমি যদি উপাদানগুলির মান বা এইচটিএমএলকে সতর্ক করার চেষ্টা করি তবে এটি সতর্ক করে দেয়।

সুতরাং এই কোড:

এইচটিএমএল

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="jquery-2.1.3.min.js"></script>
        <script src="script.js"></script>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;           
            }           
            #wrapper{
                width: 150px;
                text-align: center;
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#75bdd1), color-stop(14%,#75bdd1), color-stop(100%,#2294b3));
                padding: 10px 2px;
            }
            h3{
                font-family: Arial, Helvetica, sans-serif;
            }
            img{
                width: 50px;
                margin: 0 auto;     
            }
            input{
            display: none;          
            }
        </style>


    </head>
    <body>
        <div id="wrapper">
            <h3>Select subtitles file</h3>
                <img src="browse.png" alt="browse">
        </div>
        <input type="file" accept=".srt" id="file">
    </body>
</html>

script.js

$("div").click(function () {
    console.log('loaded');
});

ধন্যবাদ।

https://src-bin.com


Answer #1

আপনার script ট্যাগটি যে উপাদানগুলিতে এটি কাজ করে সেগুলি নির্ধারণ করার জন্য এইচটিএমএল এর উপরে , এটি খুঁজে পাবে না কারণ সেই কোডটি কখন চালিত হয় সেগুলির অস্তিত্ব নেই। আপনার পৃষ্ঠায় জিনিসগুলি ক্রম ক্রমে ঘটছে তা এখানে:

  1. html এবং head উপাদান তৈরি করা হয়
  2. meta উপাদান তৈরি করা হয় এবং এর সামগ্রীটি পার্সার দ্বারা উল্লিখিত হয়
  3. JQuery এর জন্য script উপাদান তৈরি করা হয়েছে
  4. পার্সার বন্ধ হয়ে jQuery ফাইলটি লোড হওয়ার জন্য অপেক্ষা করে
  5. একবার লোড হয়ে গেলে, jQuery ফাইলটি কার্যকর করা হয়
  6. পার্সিং অব্যাহত রয়েছে
  7. আপনার কোডের জন্য script উপাদান তৈরি করা হয়েছে
  8. পার্সারটি আপনার ফাইলটি লোড হওয়ার জন্য অপেক্ষা করে its
  9. একবার লোড হয়ে গেলে, আপনার স্ক্রিপ্ট কোডটি চালিত হয় - এবং কোনও উপাদান খুঁজে পায় না কারণ এখনও কোনও div উপাদান নেই
  10. পার্সিং অব্যাহত রয়েছে
  11. ব্রাউজারটি পৃষ্ঠাটি পার্সিং এবং বিল্ডিং শেষ করে, যার মধ্যে আপনি আপনার স্ক্রিপ্টে অ্যাক্সেস করার চেষ্টা করছেন এমন উপাদানগুলি তৈরি করা অন্তর্ভুক্ত

এটি সংশোধন করার উপায়:

  1. সমাপনী </body> ট্যাগের ঠিক আগে script উপাদানগুলিকে একেবারে শেষ দিকে সরিয়ে দিন, সুতরাং আপনার কোডটি চালানোর আগে সমস্ত উপাদান উপস্থিত রয়েছে। এটি না করার জন্য একটি ভাল কারণ ব্যতীত, এটি সাধারণত সেরা সমাধান।

  2. JQuery এর ready বৈশিষ্ট্যটি ব্যবহার করুন।

  3. স্ক্রিপ্ট উপাদানটিতে defer বৈশিষ্ট্যটি ব্যবহার করুন, তবে সাবধান থাকুন যে সমস্ত ব্রাউজারগুলি এটি এখনও সমর্থন করে না।

তবে আবার, আপনি যদি স্ক্রিপ্টের উপাদানগুলি কোথায় যান নিয়ন্ত্রণ করেন, # 1 সাধারণত আপনার সেরা বাজি হয়।


Answer #2

আপনি যখন ক্লিক করুন () পদ্ধতিটি কল করেন তখন ডোমটি পুরোপুরি লোড হয় না। DOM- এ সমস্ত কিছু লোড না হওয়া পর্যন্ত আপনাকে অপেক্ষা করতে হবে o সুতরাং আপনাকে আপনার স্ক্রিপ্ট.জগুলি পরিবর্তন করতে হবে:

$(document).ready(function(){
$("div").click(function () {
    console.log('loaded');
});
});

Answer #3

$(document).on('click', "element" , function (ev) {
    console.log('loaded');
})

})





jquery