通過js向按鈕添加動態onclick =“ location.href =

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>

那是起作用的部分。 但是我真正想要的是，它在“ DELETE BUTTON”之前將href添加到按鈕。 因此，我需要將此代碼<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

如果您的代碼針對的是錨元素而不是按鈕，那么請使用更好的選擇器來查找該元素。 在您的情況下，在類選擇器的button.btn_ok加上標簽選擇器，即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});

並且通過您的示例，您的end元素將不再具有btn_ok類，您可以使用jQuery的removeClass()將其刪除

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

Answer 2

更改此行

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

對此：

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