1

我在我的脚本中创建了一个构造函数，它格式化<div>s 以便可以即时创建和销毁它们。
这是功能：

function formatDiv(target,divId,divClass,content,onclick)
{
    $("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\' onclick=\'" + onclick + "\'>" + content +"</div>");

}

我一直在尝试做的是将函数调用作为数组中的字符串传递"Main()"给主菜单，并将其分配给<div>'sonclick=""属性。在使用 jquery 升级我的代码之前，这工作得很好，但是现在当我单击 时<div>，控制台返回：ReferenceError: Main is not defined。
假设这是由包含 jquery 引起的（因为它在我的旧备份中仍然有效），我决定将构造函数更新为我们 jquery 的 .click 事件处理程序，
结果如下：

function formatDiv(target,divId,divClass,content,onclick)
{
    $("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content +"</div>");
    $("#"+divId).click(function(){$(onclick)});
}

，并且我将要在数组管道信息中调用的函数的格式更改为onclick参数 from "Main()"to Main。
现在，当单击 a 时<div>，什么也没有发生，没有错误或任何东西。

将 onclick 处理程序添加到我<div>的 s 的最佳方法是什么？我使用 .click 不正确吗？Jquery 对我来说仍然是新的（尽管 w3schools 课程和 jquery 网站上的教程），所以我不得不猜测我使用不正确。任何帮助，将不胜感激。

这是整个脚本：

$(document).ready(function () {


    $(Main);

    //main menu
    function Main()
    {
        var mainList = [">New List",">Show Lists",">Delete Lists"];
        var onClick = [NewList,Main,Main];
        var mainMenu = new Menu("Main Menu","menuMain",mainList,onClick);
        mainMenu.contentMenu();
    }

    //new list menu
    function NewList()
    {
        var mainList = ["> Create a New List"];
        var onClick = [Main];
        var newListMenu = new Menu("New List","menuMain",mainList,onClick);
        newListMenu.contentMenu();
    }

    //menu class
    function Menu(name,divClass,content,onclick)
    {
        $("#interface").html(null);

        //title
        formatDiv("interface",name,divClass,name,null);

        //return
        if(name != "Main Menu")
        {
            formatDiv(name,null,"return","^ Main Menu","Main()");
        }


        //display options
        this.contentMenu = function()
        {
            for(i=0; i<content.length; i++)
            {
                formatDiv("interface",content+i,"menuContent",content[i],onclick[i]);
            }
        }
    }


    //format divs
    function formatDiv(target,divId,divClass,content,onclick)
    {
        $("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content +"</div>");
        $("#"+divId).click(function(){$(onclick)});
    }


});
4

4 回答 4

0

如果你想调用一个函数，只需使用functionName()而不是$(functionName)这样更改你的代码

$(document).ready(function () {
    Main();
    ....
            //display options
            this.contentMenu = function () {
                for (i = 0; i < content.length; i++) {
                    formatDiv("interface", "content" + i, "menuContent", content[i], onclick[i]);
                }
            }
    ....
    //format divs
    function formatDiv(target, divId, divClass, content, onclick) {
        $("#" + target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content + "</div>");
        $("#" + divId).click(onclick);
    }
于 2012-07-23T03:38:31.850 回答
0

由于您的 div 是动态创建的，因此您不能使用.click()绑定，因为它只绑定到脚本运行时已经退出的元素。但是，您可以使用.on()并绑定到页面上的现有元素。最坏的情况是类似于 body 元素，但您可能会找到一个更接近 div 所在位置的元素。

例如：

$("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content +"</div>");
$('body').on('click', "#"+divId, function(){$(onclick)});

从.on()文档中：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

于 2012-07-23T03:39:09.957 回答
0

听起来您正在寻找live()类型的功能。不过，您实际上并不想使用 .live() 。这是您为什么要实际使用.on()的一个很好的答案。

于 2012-07-23T03:40:12.210 回答
-1

让我们从如何使用 jquery 制作 div 开始。您制作 div 的方式是正确的，但不是最有效的。您可以使用以下语法使用 jQuery 创建任何 html 元素

$('<NODE_NAME>')

所以对于一个 div 它将是

$('<div>')

现在我们有了一个 jquery 对象，我们需要向它添加属性，我们使用 attr 方法来完成。我们将属性名称/值对的对象传递给它。

$('<div>').attr({
    className: divClass ,
    id: divId 
});

现在，要在 div 中添加内容，我们使用 .html 方法

$('<div>')
.attr({
    className: divClass ,
    id: divId 
})
.html(
    content
);

最后我们添加 onclick 处理程序

$('<div>')
.attr({
    className: divClass ,
    id: divId 
})
.html(
    content
)
.click(
    onclick
);

您对 onclick 处理程序做错的事情是将其包装在 $() 中。这没有意义，你想调用 main 函数，而不是将它作为值传递给 jquery 函数。

于 2012-07-23T03:41:32.343 回答