add dynamic onclick="location.href= to button via js

Question

I have a working site with a working modal popup built with jquery. On this site there is a table with a column "delete". Every row has a href which opens the modal popup and in this popup there is aa href link "DELETE". This href link is filled dynamically by js code, depending on which delete column link was clicked on the site:

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

The following script adds the href part to a href inside the modal popup.

<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>

Modal popup:

<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>

The script converts this part <a class="dddeletebutt btn-ok">DELETE</a> into <a class="dddeletebutt btn-ok" href="deleteTI.php?id=2">DELETE</a>

That's the part which is working. But what I actually want is, that it adds the href to the button before "DELETE BUTTON". Therefore I need to transcode this code <button type="button" class="ddeletebutt btn-ok">DELETE BUTTON</button> into <button type="button" class="ddeletebutt" onclick="location.href='deleteTI.php?id=2'">DELETE BUTTON</button>

But at the moment I obviously only getting: <button type="button" class="ddeletebutt btn-ok" href="deleteTI.php?id=2">DELETE BUTTON</button>

How can I change the added href= into onclick="location.href=

Thank you!

Answer 1

If your code is targeting the anchor element instead of your button then use a better selector for finding the element. In your case prefix your class selector with a tag selector ie button.btn_ok

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

Also you don't need to set the actual html onclick attribute, you can use jQuery event methods, or the native 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});

And by your example your end element would not have the btn_ok class any more which you can remove by using jQuery's removeClass()

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

Answer 2

Change this line

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

To this:

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