Как вы обновляете существующую целевую целевую базу данных Bootstrap?

Я попытался обновить существующую data-target с помощью data-target="#testModal1" чтобы указать на #testModal2 modal с использованием jquery .data, но даже после изменения атрибута данных он все еще связан с #testModal1

//Jquery:

$('#testButton').data('target', '#testModal2')
<!-- HTML: -->


<button id='testButton' data-toggle="modal" data-target="#testModal1">
      Test
    </button>

<div class="modal fade" id="testModal1" tabindex="-1" role="dialog" aria-hidden="true" style='display:none'>
  <div class="modal-dialog">
    <div class="modal-content">
      Testing Testing 1
    </div>
  </div>
</div>

<div class="modal fade" id="testModal2" tabindex="-1" role="dialog" aria-hidden="true" style='display:none;'>
  <div class="modal-dialog">
    <div class="modal-content">
      Testing Testing 2
    </div>
  </div>
</div>

Ответы

Ответ 1

Давайте посмотрим в documetation jQuery, что .data():

.data()

Храните произвольные данные, связанные с соответствующими элементами, или возвращайте значение в именованном хранилище данных для первого элемента в наборе согласованных элементов.

.data( key, value )

Описание: Хранить произвольные данные, связанные с соответствующими элементами.

  • ключ

    Тип: String

    Строка, обозначающая набор данных для установки.

  • стоимость

    Тип: Объект

    Новое значение данных; это может быть любой тип Javascript, включая Array или Object.

Используя $('#testButton').data('target','#testModal2') вы не будете изменять атрибут data-target но вы сохраните строку "#testModal2" в поле "target". Затем $('#testButton').data('target') вернет "#testModal2".

Это правда, что .data('key') может использоваться для возврата значения атрибута data-key. Но вы не можете установить его с помощью .data('key', 'newValue').

Чтобы установить значение атрибута, наиболее распространенным и простым способом является использование .attr().

Итак, ответ прост: измените data в attr и используйте data-target вместо target:

$('#testButton').attr('data-target','#testModal2');

JSFIDDLE