добавить динамическое onclick = "location.href = к кнопке через js

Question

У меня есть рабочий сайт с рабочим модальным всплывающим окном, созданным с помощью jquery. На этом сайте есть таблица с колонкой «удалить». В каждой строке есть href, который открывает модальное всплывающее окно, и в этом всплывающем окне есть ссылка href «DELETE». Эта ссылка href динамически заполняется кодом js, в зависимости от того, какая ссылка на столбец удаления была нажата на сайте:

<td><span id="hoverdeleteTI" data-href="deleteTI.php?id=2" data-toggle="modal" data-target="#confirm-delete">OPEN POPUP</span></td>

Следующий скрипт добавляет часть href к href внутри модального всплывающего окна.

<script>
$('#confirm-delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));

$('.debug-url').html('delete URL: <strong>' + $(this).find('.btn-ok').attr('href') + '</strong>');
});
</script>

Модальное всплывающее окно:

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="head-deletepopup">
                <span class="close" data-dismiss="modal" aria-hidden="true">×</span>
                <div class="mpopup-titel">DELETE CONFIRM</div>
            </div>

            <div class="modal-body">
                <p>REALLY?</p>
                <p class="debug-url"></p>
            </div>

            <div class="modal-footer">
                <button type="button" class="ddeletebutt btn-default" data-dismiss="modal">CANCEL</button>
                <button type="button" class="ddeletebutt btn-ok">DELETE BUTTON</button>
                <a class="dddeletebutt btn-ok">DELETE</a>
            </div>
        </div>
    </div>
</div>

Скрипт преобразует эту часть <a class="dddeletebutt btn-ok">DELETE</a> в <a class="dddeletebutt btn-ok" href="deleteTI.php?id=2">DELETE</a>

Это та часть, которая работает. Но что я на самом деле хочу, так это то, что он добавляет href к кнопке перед «DELETE BUTTON». Поэтому мне нужно перекодировать этот код <button type="button" class="ddeletebutt btn-ok">DELETE BUTTON</button> в <button type="button" class="ddeletebutt" onclick="location.href='deleteTI.php?id=2'">DELETE BUTTON</button>

Но на данный момент я, очевидно, только получаю: <button type="button" class="ddeletebutt btn-ok" href="deleteTI.php?id=2">DELETE BUTTON</button>

Как я могу изменить добавленные href = на onclick = "location.href =

Спасибо!

Answer 1

Изменить эту строку

$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));

К этому:

$(this).find('.btn-ok').attr('onclick', 'location.href=\'' + $(e.relatedTarget).data('href') + '\'');

Answer 2

Если ваш код нацелен на элемент привязки, а не на кнопку, используйте лучший селектор для поиска элемента. В вашем случае добавьте префикс вашего класса к тэгу, например, button.btn_ok

$(this).find('button.btn_ok')

Также вам не нужно устанавливать фактический атрибут html onclick, вы можете использовать методы событий jQuery или нативный addEventListener

let href = $(e.relatedTarget).data('href');
$(this).find('button.btn_ok').click(()=>location.href=href});
//or with native methods
this.querySelector('button.btn_ok').addEventListener('click',()=>location.href=href});

И в вашем примере у вашего конечного элемента больше не будет класса btn_ok, который вы можете удалить с помощью jQuery's removeClass()

$(this).find('button.btn_ok').removeClass('btn_ok');