Не удается установить идентификатор данных после успеха AJAX?

В настоящее время у меня есть функция jQuery, в которой я выполняю запрос AJAX. В случае успеха я вижу, что возвращенные данные верны, но когда я пытаюсь изменить data-id="new" на новый ответ, он абсолютно ничего не делает.

Я загружаю div data-id="new" в DOM после начальной загрузки страницы.

Я могу пройти весь путь до .each-requirement и изменить HTML внутри ответа, но не могу изменить идентификатор данных .each-requirement.

HTML:

<div class="dashboard-container-toolbar dashboard-requirement-toolbar center">
<div class="select2-container requirements-select select2-allowclear" id="s2id_add-essential-requirement">
    <a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">
        <span class="select2-chosen">CSS</span><abbr class="select2-search-choice-close"></abbr>   
        <span class="select2-arrow"><b></b></span></a><input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen1"></div>
        <select id="add-essential-requirement" class="requirements-select select2-offscreen" data-placeholder="Add Essential Requirement" tabindex="-1">
            <option></option>
            <option value="cmYiaONlNtw5GP11-e">CAD</option>
            <option value="zdttiUMKAR0sKlSu-e">CSS</option>
            <option value="4MzgJIEyaL2vizhQ-e">Excel Spreadsheets</option>
            <option value="j70U4vt5kWm7wLjB-e">Fireworks</option>
            <option value="7nCu8QIIJQzAQAy3-e">Git</option>
            <option value="1bZM8poaikJRLo5P-e">HTML</option>
        </select>
</div>
<div class="requirement-container sans-serif center"><br><br>
<div class="each-requirement overflow-hidden" data-id="new">
    <div style="margin-left:80px" class="name float-left" data-id="zdttiUMKAR0sKlSu-e">CSS</div>
    <span style="margin-left:-37px;" id="skill-level-0" class="skill-level color-blue center sans-serif">Beginner</span>
    <div style="margin: 20px auto 0" class="slide ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-0" aria-disabled="false">
        <div class="inner-slider-marker"></div>
        <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
    </div>
</div>

jQuery:

$(document).on('change', '.requirements-select', function(event){
    event.preventDefault();
    var $this = $(this);

    var name = $this.select2('data').text;
    var str = $this.val();

    $('.initial-r-load').remove();
    $this.parents('.dashboard-requirement-toolbar').siblings('.requirement-container').append('<div class="each-requirement overflow-hidden" data-id="new"></div>');
    $this.parents('.dashboard-requirement-toolbar').siblings('.requirement-container').children('.each-requirement:last').addSlide(name, str);

    $.ajax({
        type: "POST",
        url: base_url + "job/add_requirement",
        dataType: "text",
        data: {
            skl_name: name,
            skl_str: str,
            j_str: window.location.pathname.split('/').pop()
        },
        cache:false,
        success: 
        function(data){
            var response = data;
            /* THIS WORKS */ $this.parents('.dashboard-requirement-toolbar').siblings('.requirement-container').children('.each-requirement:last').html(response)
            /* THIS DOESN'T WORK */ $this.parents('.dashboard-requirement-toolbar').siblings('.requirement-container').children('.each-requirement:last').data('id', response)          
        }
    });

    return false;

});

Любая помощь приветствуется. Спасибо.


javascript html jquery ajax custom-data-attribute
person learn    schedule 15.04.2014    source источник
comment
Как проверить, что не работает? data метод не устанавливает и не изменяет значение атрибута, он изменяет внутреннюю структуру данных.   -  person VisioN    schedule 15.04.2014
comment
@VisioN Обычно я могу выяснить, сработало это или нет, просто посмотрев на измененный data-id="whatever-value" в HTML в Dev Tools. Есть ли другой способ?   -  person learn    schedule 15.04.2014
comment
Если вам нужно изменить разметку, используйте вместо нее .attr('data-id', 'whatever-value'). В противном случае используйте .data(), но проверьте правильность, подобрав значение обратно, т.е. console.log(el.data('id')).   -  person VisioN    schedule 15.04.2014
comment
@VisioN Иногда я такой идиот. Спасибо что исправили. Вы хотите создать быстрый ответ, и я приму :)   -  person learn    schedule 15.04.2014

Ответы (2)


arrow_upward
2
arrow_downward

Просто копируя комментарии, метод data не устанавливает и не изменяет значение атрибута, он изменяет внутреннюю структуру данных элемента, которая не отображается как измененный атрибут data-*.

Итак, если вам нужно изменить разметку, используйте вместо этого .attr('data-id', 'whatever-value'). В противном случае используйте метод .data(), как и вы, но проверяйте правильность подбором значения обратно, т.е. console.log(el.data('id')).

PS: В качестве примечания я бы рекомендовал вам использовать closest() метод вместо parents(). Он быстро выберет первый совпадающий родительский элемент вместо выбора всех совпадающих родительских элементов.

person VisioN    schedule 15.04.2014
comment
Также спасибо за совет, я буду использовать closest() чаще. - person learn; 15.04.2014

arrow_upward
0
arrow_downward

Попробуйте изменить код следующим образом:

$this.parents('.dashboard-requirement-toolbar')
     .siblings('.requirement-container')
     .children('.each-requirement:last')
     .attr('data-id', response)

Это должно работать.

person Rohitkumar    schedule 15.04.2014