0

所以我有这段代码可以点击一个 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
}
4

3 回答 3

3

如果您将代码放在instructbox元素之前的 HTML 文件中，那么当代码运行时，该元素将不在 DOM 中。结果，$("#instructbox")找不到元素，也没有任何东西可以添加点击处理程序。

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

于 2013-10-18T00:28:00.080 回答
1

如果您确保将它放在它所引用的 HTML之后，它将自行工作。

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

或者，遵循最佳实践并将其放入document.ready.

于 2013-10-18T00:28:24.440 回答
1

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

于 2013-10-18T00:32:09.997 回答