Question

我正在尝试将这个旧的javascript转换为jquery以便学习jquery。

旧javascript的目标是在单击“添加框”按钮时向页面添加一个框。单击框本身时，显示唯一的ID。

我坚持如何正确编码div，并在其上添加一个框。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>E10W12</title>
        <meta charset="UTF-8">
        <style>
        .clrBox { 
            background-color: orange;
            width: 50px;
            height: 50px;
            margin: 10px;
        }
        </style>
        <script src="jquery-2.0.3.js"></script>
        <script src="E10W12.js"></script>
    </head>
    <body>
        <form>
            <input type="button" id="addButton" value="Add Box">
        </form>

    </body>
</html>

旧Javascript：

window.onload = init;

var i= 0;

function init() {
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
}

function handleButtonClick(e) { 
    i++;
    var div = document.createElement("div");
    div.setAttribute("class","clrBox");
    div.setAttribute("id","Box"+i);
    div.onclick=function(){handleBoxClick(div);}
    var body = document.getElementsByTagName("body");
    body[0].appendChild(div);
}

function handleBoxClick(el){
    alert(el.id);
}

用于替换Javascript的新JQuery：

var i = 0;

$(function() {
    $( '#addButton').click(function(){
        i++;

        Not sure what to do here?

    });
});

好吧，我使用下面提供的两个答案得到它。谢谢你们！

解决方案：

$(function() {

var i = 0;

    $( '#addButton').click(function(){
        i++;
        $('<div/>', {
            'id': 'Box' + i,
            'class': 'clrBox'
        }).appendTo('body');


        $("div").click(function () {
             alert(this.id);
        })
    });
});

Answer 1

试试这个，

$('<div/>', {
    'id': 'Box' + i,
    'class': 'clrBox',
    click: function(){handleBoxClick($(this));}
}).appendTo('body');

DEMO

更新：http://jsfiddle.net/XZK95/1/

            var i = 0
            $("#addButton").click(function () {
                i++
                $("#myForm").append("<div id=\"Box" + i + "\"></div>");
                $("div").click(function () {
                    $(this).html(this.id);
                })
            });

使用jquery创建带有div的框

3 个答案:

DEMO

更新：http://jsfiddle.net/XZK95/1/