Question

所以我根据用户点击的内容更新div的内容。有时我会显示图像，有时我会显示文字：

var output;
switch(type)
{
    case IMAGE:
        pages = null;
        contentText = null;
        upArrow = null;
        downArrow = null;

        var imageURL = "assets/images/" + items[itemIndex].imageURL;
        output = '<img src="' + imageURL + '" class="fullImage" />';
        break;

    case TEXT:
        pageIndex = 0;
        pages = items[itemIndex].copy.page;
        numPages = pages.length;
        lastPageIndex = numPages - 1;

        output = '<div id="contentText" class="text"></div>';
        output += '<div id="textUpArrow" class="arrow upArrow"></div>';
        output += '<div id="textDownArrow" class="arrow downArrow"></div>';

        contentText = $("#contentText");

        textUpArrow = $("#textUpArrow");
        textUpArrow.bind(MOUSE_DOWN, onUpArrowClicked);

        textDownArrow = $("#textDownArrow");
        textDownArrow.bind(MOUSE_DOWN, onDownArrowClicked);

        setText();
        break;
}
content.html(output);

问题似乎与范围有关。我在我的JS文件的根级别声明了contentText，textUpArrow和textDownArrow（我不知道它是否被称为root，但它不在每个函数之外，所以它在全局可用。）

当我在控制台中输出所述变量时，没有任何未定义的内容。但是，每当我尝试使用这些变量，对事件监听器或通过jQuery更改CSS时，都没有任何反应。

我应该研究什么？谢谢！

Answer 1

您将事件绑定到div 之前已将其添加到DOM中。那不行。

Answer 2

我认为您希望使用.on()代替.bind()。来自jQuery .bind()文档：

从jQuery 1.7开始，.on()方法是首选方法将事件处理程序附加到文档。对于早期版本， .bind()方法用于直接将事件处理程序附加到元素。处理程序附加到当前选定的元素中 jQuery对象，因此这些元素必须存在于调用点发生.bind()。有关更灵活的事件绑定，请参阅讨论 .on()或.delegate()中的事件委托。

Answer 3

何时将输出应用于文档？

如果它在setText（）中，您可能希望在完成输出文本之后和设置contentText之前调用该方法。

当您尝试设置该变量时，文档中没有带有该ID的div。

Answer 4

这是因为您在创建元素之前设置了contentText，textUpArrow和textDownArrow。

output = '<div id="contentText" class="text"></div>';
output += '<div id="textUpArrow" class="arrow upArrow"></div>';
output += '<div id="textDownArrow" class="arrow downArrow"></div>';

contentText = $("#contentText");

此处，contentText设置为元素为#contentText的元素，但该元素尚未创建，因此未定义

动态创建的div在jQuery中不可用吗？

4 个答案: