jQuery append() не работает для объединенной строки

#jquery #html #append #string-concatenation

#jquery #HTML #добавить #строка-конкатенация

Вопрос:

(Полный код ниже)

Это

 $('#'   id).parent().append('<div id="pop-up">hello</div>');

работает. Но это

 $('#'   id).parent().append('<div id="pop-up-'   id   '">hello</div>');

не работает.

Тот факт, что первая версия работает, позволяет мне предположить, что проблема не в id переменной…

Таким образом, полный код

 function clickOnElement(id) {
    var obj = {};
    obj.clicked = String(id);
    var jsonData = JSON.stringify(obj);
    $.ajax({
        type: 'POST',
        url: '../db/RequestHandler.ashx',
        data: jsonData,
        contentType: 'application/json; charset-utf-8',
        success: function (response) {
            // Add the div for the dialog-box
            $('<div>Hello</div>', {
                "id": "pop-up"   id
            }).appendTo($('#'   id).parent());
        },
        error: function () {
            console.log("request error");
        }
    });
}

1. .append ожидает элемент, а не строку. Если у вас есть строка HTML, используйте .html() вместо

2. .append() будет работать после загрузки DOM. родительский div загружен, но одновременно вы добавляете его к тому элементу, которого в данный момент нет в DOM. попробуйте добавить после того, как документ будет готов

3. для меня отлично работает jsfiddle.net/gx6mrqr7

4. откуда берется идентификатор?

5. Я развиваюсь в ASP.NET Бритва: $('#@r.id').click(function() { clickOnElement(@r.id); });

Ответ №1:

Используйте .appendTo()

Методы .append() и .appendTo() выполняют ту же задачу.
Основное различие заключается в синтаксисе, в частности, в размещении содержимого и цели.
С помощью .append() выражение селектора, предшествующее методу, является контейнером, в который вставляется содержимое.
С другой стороны, с помощью .appendTo() содержимое предшествует методу либо как выражение селектора, либо как разметка, созданная на лету, и оно вставляется в целевой контейнер.

Пример кода

 $('<div>Hello</div>', {
    "id": "pop-up"   id
}).appendTo($('#'   id).parent());

К ТВОЕМУ СВЕДЕНИЮ,

Пожалуйста, убедитесь, что элемент существует в DOM и вы добавляете его в правильном селекторе.

Надеюсь, это поможет.

1. Да, вы допустили ошибку, ' но я ее исправил. $('#' id).parent().append("<div id='pop-up" id "'>hello</div>"); Кажется, это работает. Кто-нибудь может объяснить, почему??

2. Я обновил свой ответ, просто убедитесь, что вы используете appendTo правильный.

3. нет ничего плохого в .append() том, что это просто конфиль кавычки.

4. Спасибо за ваш ответ. Теперь он div добавлен правильно. id Пока не работает только атрибут. Но, возможно, я мог бы найти обходной путь с .attr() помощью метода jQuery.

5. Хорошо, рад видеть, что это, наконец, помогает вам.

Ответ №2:

Попробуйте выполнить следующее

 var parent = $('#'   id).parent();
var el = $('<div>', {id: "pop-up" id,text:"hello"});
 el.appendTo(parent);

правильный способ добавления текста к созданному объекту — использовать свойство text:

демонстрация: https://jsfiddle.net/gx6mrqr7/

1. Это действительно сработало. Спасибо. Есть предложения, почему?

2. из того, что я могу сказать, jquery не может добавить свойство в закрытый div <div>Hello</div>

3. Я также заметил, что "pop-up-" id это не работает, но "pop-up" id работает.

4. Ну, я не полагаюсь на - 😉

Ответ №3:

Создайте HTML с помощью jQuery (html, атрибуты), вы будете в безопасности от кавычек

 $('#'   id)
    .parent()
    .append($('<div>', {
        id: "pop-up-"   id ,
        text: "hello"
    });