1

スクリプトで<div>sをフォーマットするコンストラクターを作成したので、その場で作成および破棄できます。
関数は次のとおりです。

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

}

私がこれでやろうとしているのは、メインメニューのように、配列から文字列として関数呼び出しを渡し、それを'sプロパティ"Main()"に割り当てることです。これは、jqueryを使用してコードをアップグレードする前は正常に機能していましたが、をクリックすると、コンソールは次のように戻ります。 これがjqueryの包含によって引き起こされたと仮定すると（古いバックアップでも機能するため）、コンストラクターをjqueryの.clickイベントハンドラーに更新することにしました。 その結果、次のようになります。<div>onclick=""<div>ReferenceError: Main is not defined

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

、および配列配管情報で呼び出される関数のフォーマットをonclickパラメータfromから"Main()"に変更しましたMain。
これで、をクリックしても<div>、何も起こらず、エラーも何も起こりません。

onclickハンドラーを自分に追加する最良の方法は何<div>ですか？.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

live（）タイプの機能を探しているようです。ただし、実際には.live（）を使用する必要はありません。これが、実際に.on（）を使用する理由に対する良い答えです。

于 2012-07-23T03:40:12.210 に答える
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

.click()divは動的に作成されるため、スクリプトの実行時にすでに存在する要素にのみバインドするため、バインドに使用することはできません。ただし、ページ上の既存の要素を使用.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 に答える
-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ハンドラーで間違っているのは、$（）でラップしていることです。これは意味がありません。メイン関数を呼び出し、jquery関数に値として渡さないようにします。

于 2012-07-23T03:41:32.343 に答える