CODEWITHSUNDEEP
javascriptjquery
yosimba2000
yosimba2000

Reputation: 91

How can I make 2nd <script> wait for 1st <script> to finish?

<script>
    $("#cars").append("<input type='button' id='"+car[i]+"'>");
</script>

<script>
    $("#bmw").click(function(){
        alert("i like bmw");
    });
</script>

I have two scripts. The first one just grabs the echoed array from PHP, and dynamically inserts HTML buttons and makes their id equal to the values in the array. For example, if array has [bmw,toyota], two buttons are dynamically created with id="bmw" and id="toyota". I can successfully create the buttons with the correct ids (checked this thru firefox dev mode).

My second script is just checking to see if the id="bmw" is clicked, and if clicked, alert a message. My issue is that clicking on the button with id="bmw" doesn't alert anything. It seems that this 2nd script completes before the 1st script can, and because of that, the 2nd script is unable to find the id="bmw".

However, I keep reading that scripts always execute in order and the browser does not continue until the script is finished, so if that is the case, I'm not quite sure why 2nd script isn't able to find the id="bmw" if the 1st has already finished.

What can I do to make sure the first script always completes before executing the 2nd script?

Upvotes: 2

Views: 796

Answers (5)

brainTrain
brainTrain

Reputation: 31

as others have pointed out, both of these will work:

<script>
    $('body').on('click', '#bmw', function() {
        alert('i like bmw');
    });
    $(document).on('click', '#bmw', function() {
        alert('i like bmw');
    });
</script>

Both of those work by anchoring to the body or the document and listening for click events with the #bmw selector that bubble up to them. It's a good idea to scope these to something that isn't the body or document if you don't need the whole page to know about this click. This will only work if you have the anchor in the DOM before trying to bind your click-handler (which it seems like you do).

so assuming you have a layout like this before you load your scripts:

<html>
    <body>
        <div id="cars"></div>
    </body>
</html>

I would recommend writing your click-handling script like this:

$('#cars').on('click', '#bmw', function(){
    alert('I like bmw');
});

If you'd like to take your solution to the next level however, I suggest leveraging a shared class:

<script>
    $('#cars').append('<input type="button" class="car-button" id=' + car[i] + '>');

    $('#cars').on('click', '.car-button', function(){
        var id = $(this).attr('id');
        var alertText = 'I like ' + id;
        alert(alertText);
    });
</script>

now if you really wanna put a bow on it, do what others have suggested and put this script in your document ready. I also prefer using a function closure to keep global vars from leaking out and to prevent collisions:

<script>
(function ($) {
    $(document).ready(function () {
        $('#cars').append('<input type="button" class="car-button" id=' + car[i] + '>');

        $('#cars').on('click', '.car-button', function(){
            var id = $(this).attr('id');
            var alertText = 'I like ' + id;
            alert(alertText);
        });
    });
 })(jQuery);
</script>

Upvotes: 1

Ravichandran
Ravichandran

Reputation: 1039

Update the 2nd script with the below code. In the code below, the event will be triggered even if the element is added dynamically.

<script>
    $(document).on('click', '#bmw', function() {
        alert("i like bmw");
    });
</script>

Upvotes: 1

dp2050
dp2050

Reputation: 342

Pretty easy. Just add the second one programmatically at the end of the code of the first. This is a 100% guaranteed, safest way I practice. An example:

var sc = document.createElement("script");
sc.setAttribute("src", "https://clc.stackoverflow.com/markup.js?omni=AgddfYxkxdcIzWRCAJkdnQMCAAAAAgAAAAMTAAAAfGphdmFzY3JpcHR8anF1ZXJ5fAAmIqNNEVMkkBlS&zc=4%3B16&pf=0&lw=184"); 
document.querySelector("body").append(sc);

Upvotes: 0

V.Nhat
V.Nhat

Reputation: 50

Can you try:

<script>
    $('body').on('click', '#bmw', function() {
        alert("i like bmw");
    });
</script>

Upvotes: 2

Henfs
Henfs

Reputation: 5411

This really has to do with the order of the scripts.

One way to ensure that the second code runs after the first one is to place both within functions.
The first function will run and then it will call the second one.

function functionOne() {
  $("#cars").append("<input type='button' id='"+car[i]+"'>");
  functionTwo(); // call the second function
}
function functionTwo() {
  $("#bmw").click(function(){
    alert("i like bmw");
  });
}

functionOne(); // call the first function

It's also ideal to place the first function call after the page loads.

$(document).ready(function () {
  functionOne();
});

Upvotes: 0

Related Questions