[英]add dynamic onclick="location.href= to button via js
我有一个使用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 =
谢谢!
如果您的代码针对的是锚元素而不是按钮,那么请使用更好的选择器来查找该元素。 在您的情况下,在类选择器的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');
更改此行
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
对此:
$(this).find('.btn-ok').attr('onclick', 'location.href=\'' + $(e.relatedTarget).data('href') + '\'');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.