What is preventing jQuery .click() function from executing?

Question

This click function was previously working, until i added another button and some php...curious what's preventing it from executing as before, i've checked issues from other questions:

-jquery is properly loaded before the local script

-all functions are wrapped in .ready() [Why is this jQuery click function not working?

I found an interesting post about delegated event handling here: Jquery button click() function is not working

But i don't understand if or why this would apply to my situation...and if it does can someone explain to me its significance?

Javascript:

jQuery ( document ).ready( function ( $ ) {

function initColorPicker0 () {
    for ( x=0; x < 4; x++ ) {
        var canvasEl0 = document.getElementById('colorCanvas0');
        var canvasContext0 = canvasEl0.getContext('2d');

        var image0 = new Image(150, 150);
        image0.onload = () => canvasContext0.drawImage(image0, 0, 0, image0.width, image0.height); 
        image0.src = "../img/color-wheel-opt.jpg";
    }

    canvasEl0.onclick = function ( mouseEvent0 ) {
        var imgData0 = canvasContext0.getImageData(mouseEvent0.offsetX, mouseEvent0.offsetY, 1, 1);
        var rgba0 = imgData0.data;

        var bannerInput = $ ( '#bannerColor' );
        bannerInput.val("rgba(" + rgba0[0] + ", " + rgba0[1] + ", " + rgba0[2] + ", " + rgba0[3] + ")" );
    }
}

function demoBanner () { 

    // set click handler
    $( '#demo' ).click( function () {

      // store input values
      var formObject = {
        "prompt": document.getElementById('prompt').value,
        "c2a" : document.getElementById('c2a').value,
        "bannerColor" : document.getElementById('bannerColor').value,
      }

      //apply input values to style of new content
      var newContent = " <div style='height: auto; padding: 15px 0px; margin: 0px -15px; background-color:" + formObject.bannerColor + ";'> <a href='#'> <p style=' margin-top: 0px; margin-bottom: 0px; text-align: center; color:" + formObject.promptTextColor + ";'>"+ formObject.prompt + " <a style='padding: 5px 12px; border-radius: 7px; background-color:" + formObject.c2aBG + "; color:" + formObject.c2aTextColor + " ' href='#'> <em> " + formObject.c2a + " </em> </a> </p> </a>  </div>";

      //set input as html content of demo
      $( 'div.demo' ).html( newContent );     
    })   
}
// called functions
$ ( function () {

    initColorPicker0();

    demoBanner();

});
});

HTML:

<div id="demo" class="demo"></div>

<div class="container">

  <div class="row">
    <div class="col-sm-3 text-center">
      <div class="form-group">

        <br>

        <form action="test.php" method="post" name="form"> 

          <label for="prompt">Prompt:
            <input class="form-control" name="prompt" id="prompt" type="text">
          </label>

          <label for="c2a">Call-to-Action:
            <input class="form-control" name="c2a" id="c2a" type="text">
          </label>

          <label for="bannerColor">Banner Background Color:
            <input class="form-control" name="bannerColor" id="bannerColor" type="text">
            <canvas style="border-radius:50%;" id="colorCanvas0" class="color-canvas" width="150" height="150"></canvas>
          </label>

          <input id="demo" type="button" class="btn btn-warning" value="Demo Banner">

          <br>
          <br>

          <input id="submit" type="submit" class="btn btn-success" name="submit" value="Submit Form">

        </form>
      </div>
    </div>
  </div>
</div>


<!--jquery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- local JS -->
<script src="http://localhost:8888/vorotech_site/js/banner-tool.js"> </script>

EDIT: $( '#demo' )

Welcome to Stack Overflow. I suspect that this is related to the `event`. If you `type="submit"` it's default action is to submit the form. You need to prevent this. — Twisty, Jan 05 '19 at 21:40
To confirm, the submit button is the one you are having an issue with? Not the demo one? — basic, Jan 05 '19 at 21:40
You also have references to undefined objects: `formObject.promptTextColor`, `formObject.c2aBG`, `formObject.c2aTextColor`. I don't see where these are defined anyplace. — Twisty, Jan 05 '19 at 22:31

Twisty · Answer 1 · 2019-01-06T01:23:52.523

First of all, for .click(), it passes an event to the callback. For type="submit", this includes submitting the form. Would advise using .preventDefault().

Here is an example including some jQuery cleanup. Also tried to retain proper object indexes.

$(function() {
  function initColorPicker0() {
    var canvasEl0, canvasContext0;
    for (x = 0; x < 4; x++) {
      canvasEl0 = $('#colorCanvas0')[0];
      canvasContext0 = canvasEl0.getContext('2d');

      var image0 = new Image(150, 150);
      image0.onload = () => canvasContext0.drawImage(image0, 0, 0, image0.width, image0.height);
      image0.src = "../img/color-wheel-opt.jpg";
    }

    canvasEl0.onclick = function(mouseEvent0) {
      var imgData0 = canvasContext0.getImageData(mouseEvent0.offsetX, mouseEvent0.offsetY, 1, 1);
      var rgba0 = imgData0.data;

      var bannerInput = $('#bannerColor');
      bannerInput.val("rgba(" + rgba0[0] + ", " + rgba0[1] + ", " + rgba0[2] + ", " + rgba0[3] + ")");
    };
  }

  function demoBanner() {
    // set click handler
    $('#demo').click(function(e) {
      e.preventDefault();
      // store input values
      var formObject = {
        prompt: $('#prompt').val(),
        c2a: $('#c2a').val(),
        bannerColor: $('#bannerColor').val(),
      };

      //apply input values to style of new content
      var newContent = $("<div>").css({
        height: "auto",
        padding: "15px 0px",
        margin: "0px -15px",
        "background-color": formObject.bannerColor,
      });
      $("<a>", {
        href: "#"
      }).appendTo(newContent);
      $("<p>")
        .css({
          "margin": "0",
          "text-align": "center ",
          color: formObject.prompt
        })
        .html(formObject.prompt)
        .appendTo($("a", newContent));
      $("<a>", {
        href: "#"
      }).css({
        padding: "5px 12px",
        "border-radius": "7px",
        "background-color": formObject.c2a,
        color: formObject.c2a
      }).html("<em>" + formObject.c2a + "</em>").appendTo("p", newContent);

      //set input as html content of demo
      $('div.demo').html(newContent);
    });
  }
  // called functions
  initColorPicker0();
  demoBanner();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="demo" class="demo">DEMO</div>
<div class="container">
  <div class="row">
    <div class="col-sm-3 text-center">
      <div class="form-group">
        <br>
        <form action="test.php" method="post" name="form">
          <label for="prompt">Prompt:
            <input class="form-control" name="prompt" id="prompt" type="text">
          </label>

          <label for="c2a">Call-to-Action:
            <input class="form-control" name="c2a" id="c2a" type="text">
          </label>
          <label for="bannerColor">Banner Background Color:
            <input class="form-control" name="bannerColor" id="bannerColor" type="text">
            <canvas style="border-radius:50%;" id="colorCanvas0" class="color-canvas" width="150" height="150"></canvas>
          </label>
          <input id="demo" type="button" class="btn btn-warning" value="Demo Banner">
          <br>
          <br>
          <input id="submit" type="submit" class="btn btn-success" name="submit" value="Submit Form">
        </form>
      </div>
    </div>
  </div>
</div>

can you provide more information in the context of #demo being the target of the click() function? typo edited — Jim, Jan 06 '19 at 00:37
@Jim now that you have edited your post and this is in reference to `#demo`, it is less relevant, but the code would be the same. — Twisty, Jan 06 '19 at 01:14
How does `e.preventdefault()` play into this with `#demo` being of `type='button'`? i included it and it doesn't change anything. the callback function is still not executed — Jim, Jan 06 '19 at 01:50
@Jim it does not play into this scenario. Do you see any errors in Console when you click on it? — Twisty, Jan 07 '19 at 02:45
just discovered the issue. multiple id's of "demo" *face palm* — Jim, Jan 07 '19 at 03:08
@Jim that would do it! Each ID must be unique. Otherwise you capture a group. — Twisty, Jan 07 '19 at 03:11

What is preventing jQuery .click() function from executing?

1 Answers1