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
– QaMar ALi

2018-05-01 05:45:22 +00:00
Commented May 1, 2018 at 5:45 — QaMar ALi
– QaMar ALi, Commented May 1, 2018 at 5:45
change replaceWith() to html()

Mohamed-Yousef
– Mohamed-Yousef

2018-05-01 05:46:11 +00:00
Commented May 1, 2018 at 5:46 — Mohamed-Yousef
– Mohamed-Yousef, Commented May 1, 2018 at 5:46
Yes, I did and also tried html()

Musa Usman
– Musa Usman

2018-05-01 05:51:32 +00:00
Commented May 1, 2018 at 5:51 — Musa Usman
– Musa Usman, Commented May 1, 2018 at 5:51

Mohamed-Yousef · Accepted Answer · 2018-05-01 06:25:55Z

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 1, 2018 at 6:25

answered May 1, 2018 at 5:51

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Musa Usman Over a year ago

I think I understand your point but what could the be the easy fix for this?

Mohamed-Yousef Over a year ago

@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

Musa Usman Over a year ago

"Uncaught SyntaxError: missing ) after argument list" : HTML : 69

Musa Usman Over a year ago

Error on line which you asked me to change

Mohamed-Yousef Over a year ago

@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

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related