Question

所以我有一些代码来点击div

$("#instructbox").click(function() {
    alert("test");
});

但是，只有当我将它放在另一个函数中时才会起作用，例如我的document.ready函数，或者奇怪的是，它放在任何其他JS函数中。我总是想用jQuery来解决这个问题，现在我想要一个答案; p另外，如果我将它放在HTML底部的标签中，它也可以正常工作。

完整：

var words = new Array();
var sylls = new Array();
var csv_file = new Array(); // for word arrays

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "terms.csv",
        dataType: "text",
        success: function(data) {processData(data);}
     });

    // generate a haiku!
    $("#instructbox").click(function() {
        alert(writeLine(5));
    });

});



function processData(allText) {
    csv_file = allText.split('\n');

    // csv file is now in an array, split into seperate word array and syllable array
    for (var i = 0; i < csv_file.length; i++) {
        var both = csv_file[i].split(',');  // split at the comma
        words[i] = both[0]; // populate word array
        sylls[i] = both[1]; // populate syllable array
        //put_word(words[i], sylls[i]);
        //alert(words[i]);
    }
    put_word();
};

// put the words into the marquee
function put_word() {
    //console.log(words);
    // place the words into 'words' div
    var divID = document.getElementById("wordlist");    // grab 'words' div
    //divID.innerHTML = words;
    for (var i = 0; i < words.length; i++) {
        divID.innerHTML += words[i] + " ";
        //divID.innerHTML += "<span>" + words[i] + "</span>" + "<sup>" + sylls[i] + "</sup> ";
    };
}


function writeLine(syls) {
  var haikuLine = "";
  var sylLeft = syls;

  while ( sylLeft > 0 ) {  // while there are still syllables left
    var rando = Math.floor((Math.random()*300));  // draw a random word
    if (sylls[rando] <= sylLeft) {  // if this random word doesn't take too many syllables
      haikuLine += words[rando] + " ";           // add this to line string, add a space
      sylLeft -=   sylls[rando];            // subtract from syllables left

    }
  }

  return haikuLine;  // toss back finished line
}

Answer 1

如果将代码放在instructbox元素之前的HTML文件中，则代码运行时该元素将不在DOM中。因此，$("#instructbox")将找不到该元素，并且没有任何内容可以添加点击处理程序。

通过将它放在$(document).ready()处理程序中，确保已加载DOM，因此您要查找的元素将存在，您可以将处理程序绑定到它。

Answer 2

如果您确定将放在之后>它所引用的HTML，它将自行运行。

在您的情况下，将代码放在创建#instructbox的html之后。

或者，请遵循最佳做法并将其放在document.ready内。

Answer 3

发生这种情况的原因很简单。 HTML页面从上到下呈现。因此，如果您的脚本作为文件的一部分或在页面顶部的脚本标记中包含，那么在页面上更下方的“ID”属性为“instructbox”的div不存在于DOM（文档对象模型）。你需要，a。将您的脚本或引用放在页面底部的脚本文件中，以便存在相关元素，或b。将您的代码放在$(document).ready()事件侦听器中，以确保文档已呈现所有内容，并准备好将事件附加到其DOM元素。

为什么我的jQuery函数只在另一个函数中运行？

3 个答案: