jquery динамически добавлять элементы div и bind - PullRequest
Новая
       15

jquery динамически добавлять элементы div и bind

0 голосов
/ 23 декабря 2010

У меня есть этот кусок HTML на моей странице. 

<p><a href="#" id="addQueryPart" >Add</a></p>
    <div id="query_part">
        <div class="query_chunk" id="query_chunk_1">
            <select class="parameter" id="parameter_1" name="parameter_1">
                <option title="Keyword Anywhere" value="Anywhere">Keyword Anywhere</option>
                <option title="Author or Contributor" value="Contributor">Author or Contributor</option>
                <option title="Title" value="Title">Title</option>
                <option title="Subject" value="Subject">Subject</option>
            </select>
            <input class="keyword" id="keyword_1" name="keyword_1" type="text" />
            <a href="#" class="remove" id="remove_1" name="remove_1"  title="Remove">[-]
                </a>
        </div>
    </div>

Я хочу использовать jquery для динамического добавления / повторения содержимого элемента query_chunk div. Ниже то, что у меня есть, что, очевидно, не работает! Я не очень знаком с функциями jquery. Любые указатели, где я иду не так? 

$(document).ready(function () {

    Init = new function () {
        this.construct = function () {
            Actions.bind();
        }

        query_chunks = $("div.query_chunk");
        term_count = query_chunks.size();

    }

    Actions = new function () {
        this.bind = function () {

            $("#addQueryPart").bind("click", function () {

                var query_chunk = query_chunks[0].clone().attr({ 'class': 'query_chunk', 'id': 'query_chunk_' + (++term_count) });
                var search_param_select = $("select", query_chunk).attr({ 'class': 'parameter', 'id': 'parameter_' + (++term_count) });
                var keyword = $("input", query_chunk).attr({ 'class': 'keyword', 'id': 'keyword_' + (++term_count) });
                var removebtn = $("a", query_chunk).attr({ 'class': 'remove', 'id': 'remove_' + (++term_count) });
                query_chunks[0].append(query_chunk);
                keyword.bind("click", function () {
                    alert("Click event fired");
                });

            });
        }
    }
    Init.construct();
});

PS: я пытаюсь использовать аналогичную идею уже существующего скрипта MooTools js, может быть, есть более простой способ сделать это в jquery?

Ответы [ 2 ]

3 голосов
/ 23 декабря 2010

Вот рабочая версия вашего кода:

http://jsfiddle.net/9MRLQ/

Проблема заключалась в том, что вы пытались .clone() и append() на query_chunks[0], что не являетсяОбъект jQuery, но элемент HTML.Поэтому вам нужно было сначала обернуть его в $().

Еще одно обновление

http://jsfiddle.net/9MRLQ/1/

Я заменил append() на after().Поскольку append() добавляет содержимое к query_chunks[0], когда в следующий раз вы нажмете «Добавить», вы клонируете уже измененный query_chunk, поэтому вместо добавления одной строки вы добавляете две.При следующем нажатии вы добавите 4 и так далее ...

0 голосов
/ 11 ноября 2011

У меня был похожий вопрос, вот пример проекта, который мне дал Мухаммед Адель Захид, который сделал именно то, что я хотел, звучит так же, как и ваш. "динамически добавлять строки с помощью jquery '

Это решение использует MVC3.

http://www.esnips.com/doc/63cc65e3-0bc9-409d-a6ef-795985e58d32/Master-Detail3

...