Fatal编程技术网
  • javascript/
  • Javascript 单击initilazion上的Listener，但不工作

Javascript 单击initilazion上的Listener，但不工作

javascript jquery

Javascript 单击initilazion上的Listener，但不工作,javascript,jquery,Javascript,Jquery,我正在学习javaScript/jQuery，我想做的就是使用一个循环在屏幕上放置一些图片，并设置一个计数器，每次单击图片时计数器都会增加。 从其他stackoverflow问题中，我了解到对于动态添加的DOM元素，我不能使用jQuery的.click（），而应该使用.on（'click'，'selector'，'function'）。但这并不能解决问题 对我来说，listner中的代码被执行一次（即，每只狗的计数器设置为1），然后点击图片产生： jquery.min.js:3 Uncaught

我正在学习javaScript/jQuery，我想做的就是使用一个循环在屏幕上放置一些图片，并设置一个计数器，每次单击图片时计数器都会增加。 从其他stackoverflow问题中，我了解到对于动态添加的DOM元素，我不能使用jQuery的.click（），而应该使用.on（'click'，'selector'，'function'）。但这并不能解决问题

对我来说，listner中的代码被执行一次（即，每只狗的计数器设置为1），然后点击图片产生：

jquery.min.js:3 Uncaught TypeError: ((n.event.special[g.origType] || (intermediate value)).handle || g.handler).apply is not a function
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)
这是我的密码：

我特别感兴趣/提及这一部分：

// add a click counter to the click-per-dog-array
        // initialize array element
        clicksPerDog[i] = 0;
        idString = "#"+wugel;
        // create listener
        $('#dogsWrapper').on('click',idString,function(j,fidString){

            console.log("the j passed to the function is: "+j.toString());
            //increase click counter
            clicksPerDog[j]++;
            // update text
            $(fidString).text('This dog has been clicked: '+clicksPerDog[j].toString()+" times.");
        }(i,idString));
对于那些感兴趣的人，以下是整个shebang：

/*
*
* Click counter practice
*
*/

// HTML bits and variables to reuse for each dog
var HTMLDogContainer= "<div id='%dogname%' class='dogcontainer'></div>";

var HTMLDogName = "<h1 >%dogname%</h1>";
var HTMLDogImage = '<img src="resources/%dogname%.jpg" alt="%dogname%" class="dogpic">';
var HTMLCounterText ='<div class="counterText" id="%idtext%"> This dog has not been clicked yet. Counter is %numberClick%.</div>';
var HTMLDogButton ='<button type="button" class="btn btn-primary">%dogname%</button>';

var dogNames = ["Bonzo","Fox","Jimbo","Larry","Mike"];
console.log("dogNames length is this: "+dogNames.length.toString());
var clicksPerDog = [];

var tmpDogContainer, tmpDogName, tmpDogImage, tmpCounterText, tmpDogButton, tmpIdString;

// Let's loop over the dogs in our array and create the elements
for (var i = 0; i < dogNames.length; i++) {  // The number, when thinking 1-indexed, we're on is simply i+1
    // Create a div containing the whole shebang for each dogs
    tmpDogContainer = HTMLDogContainer.replace('%dogname%', dogNames[i]);
    tmpIdString = '#' + dogNames[i]; // Make it identifiable in this loop for jQuery ID Selector purposes
    console.log('tmpIdString: ' + tmpIdString);
    $('#dogsWrapper').append(tmpDogContainer); // append it to the DOM

    // create content for the dog and append it to its respective wrapper
    tmpDogName = HTMLDogName.replace('%dogname%', dogNames[i]); // header with dogname
    $(tmpIdString).append(tmpDogName);

    tmpDogImage = HTMLDogImage.replace('%dogname%', dogNames[i]); //image
    $(tmpIdString).append(tmpDogImage);

    tmpCounterText = HTMLCounterText.replace('%numberClick%', '0'); //counter
    var wugel = dogNames[i].toString() + "counter";
    tmpCounterText = tmpCounterText.replace('%idtext%', wugel); //counter
    $(tmpIdString).append(tmpCounterText);

    // create a button for the dog
    tmpDogButton = HTMLDogButton.replace('%dogname%', dogNames[i]);
    $('#dogSelector').append(tmpDogButton); // append it to the DOM

    // add a click counter to the click-per-dog-array
    // initialize array element
    clicksPerDog[i] = 0;
    idString = "#"+wugel;
    // create listener
    $('#dogsWrapper').on('click',idString,function(j,fidString){

        console.log("the j passed to the function is: "+j.toString());
        //increase click counter
        clicksPerDog[j]++;
        // update text
        $(fidString).text('This dog has been clicked: '+clicksPerDog[j].toString()+" times.");
    }(i,idString));

  }

/*
*
*点击柜台练习
*
*/
//为每只狗重复使用的HTML位和变量
var htmldocontainer=“”；
var HTMLDogName=“%dogname%”；
var HTMLDogImage=''；
var HTMLCounterText='此狗尚未被单击。计数器为%numberClick%；
var HTMLDogButton='%dogname%'；
var dogNames=[“邦佐”、“福克斯”、“吉姆博”、“拉里”、“迈克”]；
log（“dogNames长度是：”+dogNames.length.toString（））；
var clicksPerDog=[]；
var tmpDogContainer、tmpDogName、tmpDogImage、tmpCounterText、tmpDogButton、tmpIdString；
//让我们在数组中循环狗并创建元素
对于（var i=0；i
对于此HTML：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Doggo</title>
  <!-- Latest compiled and minified Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- My own CSS -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div id="dogsWrapper">

    </div>
    <div class="dog-selection-area">
      <p>Select the dog you would like to click:</p>
      <div id="dogSelector" class="btn-group">
      </div>
    </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <!-- Latest compiled and minified Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="js/skript.js"></script>
</body>

</html>


狗狗
选择要单击的狗：
看看这个示例实现。 点击“此狗尚未点击”，增加点击次数。 将其视为进一步进行更改的方向

需要注意的几件事：

  • 您还没有将代码包装到$（文档）。准备好了
  • 由于您需要为每只狗设置一个计数器，因此您可能需要一个对象，该对象的狗名将作为键，单击计数作为值
  • 我已经更正了此示例的代码
    • $（文档）.ready（函数（）{
//为每只狗重复使用的HTML位和变量
var htmldocontainer=“”；
var HTMLDogName=“%dogname%”；
var HTMLDogImage=''；
var HTMLCounterText='此狗尚未被单击。计数器为%numberClick%'；
var HTMLDogButton='%dogname%'；
var dogNames=[“邦佐”、“福克斯”、“吉姆博”、“拉里”、“迈克”]；
//log（“dogNames长度是：”+dogNames.length.toString（））；
//var clicksPerDog=[]；
var tmpDogContainer、tmpDogName、tmpDogImage、tmpCounterText、tmpDogButton、tmpIdString；
//让我们在数组中循环狗并创建元素
对于（var i=0；i