是什么导致jQuery .click（）函数无法执行？

Question

此点击功能以前一直有效，直到我添加了另一个按钮和一些php ...奇怪的是阻止它像以前那样执行，我已经检查了其他问题的问题：

-jquery已在本地脚本之前正确加载

-所有函数都包装在.ready（）[Why is this jQuery click function not working?

中

我在这里找到了有关委托事件处理的有趣文章：Jquery button click() function is not working

但是我不知道这是否或为什么会适用于我的情况……如果确实如此，那么有人可以向我解释其重要性吗？

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>

编辑：$（'#demo'）

Answer 1

首先，对于.click()，它将event传递给回调。对于type="submit"，这包括提交表单。建议使用.preventDefault()。

这是一个包含一些jQuery清理的示例。还尝试保留适当的对象索引。

$(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>