динамически добавлять входы через JavaScript - PullRequest
Новая
       1

динамически добавлять входы через JavaScript

0 голосов
/ 04 октября 2011

У меня есть два div и ссылка для каждого.Я пытаюсь написать функцию onclick, которая добавляет новый div внутри одного из двух div.Новый div будет иметь два входа формы, добавленные к ним.Новый div будет иметь метку уникального метки времени.Я сосу на javascript и не могу понять, что я делаю не так.

Вот ссылка на jsfiddle, я пытаюсь работать с ним с http://jsfiddle.net/XLuHU/6/

<a href='javascript:void;' onclick='return add_item("xyz", "Candy", "45.99", "#item_box1")'>Add Item to Box 1</a>

<br>

<a href='javascript:void;' onclick='return add_item("123", "Soda", "1.99", "#item_box2")'>Add Item to Box 2</a><br><br>

<div id='item_box1'></div><br><br>
<div id='item_box2'></div>



function add_item(code, title, price, divbox){

    var idtag = "div_" + event.timeStamp;

    if(divbox == "#item_box1")
    {
      var item_title = $("<input/>", {
          type: 'text',
          name: "box1_item_title[]",
          value: title,
           });

       var item_price = $("<input/>", {
          type: 'text',
          name: "box1_item_price[]",
          value: price,
           });
       var new_item = item_title + " - " + item_price; 
    }
    else
    {
       var item_code = $("<input/>", {
          type: 'text',
          name: "box2_item_code[]",
          value: code,
           });

       var item_title = $("<input/>", {
          type: 'text',
          name: "box2_item_title[]",
          value: title,
           });
       var new_item = item_code + " - " + item_title; 

    }

    $(divbox).append("<div id='"+idtag+"' ></div>");

    $("#"+idtag).append(new_item);

};

1 Ответ

3 голосов
/ 04 октября 2011

Первая строка в этой строке неверна, событие не определено в этом контексте: 

var idtag = "div_" + event.timeStamp;

Это может работать лучше: 

var idtag = "div_" + new Date().getTime();

Также эта строка будет давать неверный ожидаемый результат, поскольку вы добавляете два объекта вместе: 

var new_item = item_title + " - " + item_price;

Также у вас есть запятые в вашем объекте, которые должны были вызвать ошибку JS, но, похоже, не в последних версиях Chrome и Firefox.

Вот рабочая скрипка , которая является слегка измененной версией приведенного ниже кода, из-за того, что onclick = "return add_item ...", похоже, не работает в JSFiddle. просто дать "add_item" не определено.

Однако что-то подобное должно работать в обычном HTML-документе: 

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #item_box1{
                width: 300px;
                margin: 0 auto;
                height: 100px;
                border: 1px solid blue
            }

            #item_box2{
                width: 300px;
                margin: 0 auto;
                height: 100px;
                border: 1px solid red
            }
            .link-button {
                color: rgb(0, 0, 255);
                cursor: pointer
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.js"></script>
        <script type="text/javascript">
            function add_item( code, title, price, divbox )
            {
                var idtag, item_title, item_price, item_code;
                // Generate an id based on timestamp
                idtag = "div_" + new Date().getTime();
                // Generate a new div.
                $( divbox ).append( "<div id=\"" + idtag + "\"></div>" );

                if ( divbox == "#item_box1" )
                {
                    item_title = $("<input/>", {
                        type: 'text',
                        name: "box1_item_title[]",
                        value: title
                    });

                    item_price = $("<input/>", {
                        type: 'text',
                        name: "box1_item_price[]",
                        value: price
                    });
                    // Show in the document.
                    $( "#" + idtag ).append( item_title, item_price );
                }
                else
                {
                    item_code = $("<input/>", {
                        type: 'text',
                        name: "box2_item_code[]",
                        value: code
                    });

                    item_title = $("<input/>", {
                        type: 'text',
                        name: "box2_item_title[]",
                        value: title
                    });
                    // Show in the document.
                    $( "#" + idtag ).append( item_code, item_title );
                }
            }
        </script>
    </head>
    <body>
        <a class="link-button" onclick="return add_item('xyz', 'Candy', '45.99', '#item_box1');">Add Item to Box 1</a>
        <br>
        <a class="link-button" onclick="return add_item('123', 'Soda', '1.99', '#item_box2');">Add Item to Box 2</a>
        <br>
        <br>
        <div id='item_box1'></div>
        <div id='item_box2'></div>

    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...