jQuery; Code not working in HTML Page but working in console

Question

Problem I am working on a school presentation but in which I am replacing the .swf animations using jQuery but it doesn't work. If copy the same code over to my console, it works like a charm! Any help?

My Code

<html>
<body>
<div class='div-header'>
  <div class='div-header-title'>Courier Services</div>
</div>
  <div class='div-animation-frame'>
  <h2>A Project By</h2>
  <ul>
    <li>Naqi</li>
    <li>Musa</li>
    <li>Husnain</li>
    <li>Nafey</li>
    <li>Saeed</li>
    <li>Hanzala</li>
  </ul>
  <button class='button-start'>START</button>
</div>

$(document).ready(function() {

 var companiesList = ['tcs', 'ocs', 'dhl', 'leopards'];
 var currentIndex = 0;

$('.button-start').on('click', function() {
  $('body').append("<div class='div-next-fab'></div>");
  $('.div-next-fab').append("<i class='fas fa-arrow-right'>");
  $('.div-animation-frame').replaceWith('<div class="div-animation-frame"><embed src="tcs.swf"></div>');
})

// Clicking on the next button will swap the animation file
// Somehow not working
// Copy this to console, hit enter 
// It now works

$('.div-next-fab').on( 'click', function() {
    $('.div-animation-frame').replaceWith("<div class='div-animation-frame'><embed src='ocs.swf'></div>");
})
 });

Did you add the script tags ? – QaMar ALi May 01 '18 at 05:45 — QaMar ALi, May 01 '18 at 05:45
change `replaceWith()` to `html()` – Mohamed-Yousef May 01 '18 at 05:46 — Mohamed-Yousef, May 01 '18 at 05:46
Yes, I did and also tried `html()` – Musa Usman May 01 '18 at 05:51 — Musa Usman, May 01 '18 at 05:51

Mohamed-Yousef · Accepted Answer · 2018-05-01T06:25:55.190

1

You need Event binding on dynamically created elements?

Change

$('.div-next-fab').on( 'click', function() {

to

$(document).on( 'click', '.div-next-fab' function() {

so your final code should be something like

$(document).ready(function() {

 var companiesList = ['tcs', 'ocs', 'dhl', 'leopards'];
 var currentIndex = 0;

$('.button-start').on('click', function() {
  currentIndex = 0;
  $('body').append("<div class='div-next-fab'></div>");
  $('.div-next-fab').append("<i class='fas fa-arrow-right'>");
  $('.div-animation-frame').replaceWith('<div class="div-animation-frame"><embed src="'+ companiesList[currentIndex] +'.swf"></div>');
  currentIndex++;
})

// Clicking on the next button will swap the animation file
// Somehow not working
// Copy this to console, hit enter 
// It now works

$(document).on( 'click', '.div-next-fab' ,function() {
    $('.div-animation-frame').replaceWith("<div class='div-animation-frame'><embed src='"+ companiesList[currentIndex] +".swf'></div>");
    currentIndex = (currentIndex >= companiesList.length - 1) ? 0 : currentIndex + 1;
})
});

edited May 01 '18 at 06:25

answered May 01 '18 at 05:51

Mohamed-Yousef

23,946
3
19
28

I think I understand your point but what could the be the easy fix for this? – Musa Usman May 01 '18 at 06:02
@MusaUsman I realized that you try to replace `'.div-animation-frame'` with element with same class so no need to change `replaceWith` to `html` you can just change the code above and everything will be ok – Mohamed-Yousef May 01 '18 at 06:06
"Uncaught SyntaxError: missing ) after argument list" : HTML : 69 – Musa Usman May 01 '18 at 06:10
Error on line which you asked me to change – Musa Usman May 01 '18 at 06:10
@MusaUsman you surly meant in the next line of it .. cause you changing the outer quotes from single quotes to double quotes inside `replaceWith` .. code should work correctly now – Mohamed-Yousef May 01 '18 at 06:12
@MusaUsman I update the answer with a little bit of code to let the code start from 0 when click `button-start` and start from 0 again when no next svg on the array – Mohamed-Yousef May 01 '18 at 06:18

jQuery; Code not working in HTML Page but working in console

1 Answers1