如何在 jquery attr() 方法中使用“onclick”事件的“javascript:window.location.href's”值？答案

【问题标题】：How to use "javascript:window.location.href's" value of "onclick" event in jquery attr() method?如何在 jquery attr() 方法中使用“onclick”事件的“javascript:window.location.href's”值？
【发布时间】：2013-10-09 18:08:52
【问题描述】：

我有以下 HTML 代码：

<span class="c-bl-btn c-print-btn"><input type="button" class="more print_invoice" name="" id="" value="Print Invoice" onclick="javascript:window.location.href='{$control_url}modules/transactions/view_transactions.php?op=print_invoice&txn_no=101&user_id=1001'"></span>

现在我在print_invoice 类上调用jQuery 函数，如下所示：

$('.print_invoice').live('click', function (e) { 
     // alert('here');                  
    e.preventDefault();  
    var post_url = $(this).attr('href');            
    window.open(post_url, 'Transaction Invoice', 'width=640, resizable=yes, scrollbars=yes, toolbar=no, menubar=no, location=no, directories=no, status=true')
});

$('.print_invoice').unbind('click');

但我无法在上述函数调用中获取 href 属性值。实际上我想使用"javascript:window.location.href" 中包含的URL 值，但我无法做到这一点。

【问题讨论】：

标签： javascript jquery html href attr

【解决方案1】：

你的 .print_invoice 类是一个按钮，而不是带有 href 的锚链接。

【讨论】：

：是的，我知道这是一个按钮，我想在 jQuery 函数中访问“javascript:window.location.href”的值而不是 href。但我做不到。
然后您可以使用 var post_url = $(this).attr('onclick').split("'"); 读取 onclick 属性；

【解决方案2】：

好吧，我可能会完全重写代码，但如果由于某些原因你不能，我会这样做：

var post_url = $(this).attr('onclick').split( "'" );
post_url = post_url[1];

正如另一个答案所说，没有href-属性。 URL 隐藏在 onclick-Attribute 中。所以我们得到这个并在正确的位置拆分它以获得一个数组，其中数组的中间条目（等于 post_url[1]）是 URL

【讨论】：

【解决方案3】：

将您的 HTML 更改为

<span class="c-bl-btn c-print-btn"><input type="button" class="more print_invoice" name="" id="" value="Print Invoice" data="{$control_url}modules/transactions/view_transactions.php?op=print_invoice&txn_no=101&user_id=1001"></span>

请注意，我将 url 包含在 data 属性中，而不是 onclick 事件。这样更容易提取数据。

$('.print_invoice').on('click', function (e) {        
    e.preventDefault();
    var post_url = $(this).data();
    window.open(post_url, 'Transaction Invoice', 'width=640, resizable=yes, scrollbars=yes, toolbar=no, menubar=no, location=no, directories=no, status=true')
});

【讨论】：

【解决方案4】：

使用数据属性：

<span class="c-bl-btn c-print-btn"><input type="button" class="more print_invoice" name=" value="Print Invoice" data-url="{$control_url}modules/transactions/view_transactions.php?op=print_invoice&txn_no=101&user_id=1001"></span>

Javascript 代码：

$(document).ready(function(){
$('.print_invoice').on('click', function () {  
var post_url = $(this).data('url');  
window.open(post_url, 'Transaction Invoice', 'width=640, resizable=yes, scrollbars=yes,    toolbar=no, menubar=no, location=no, directories=no, status=true')
});
});

您也可以使用输入隐藏字段：

<input type="hidden" value="{$control_url}modules/transactions/view_transactions.php? op=print_invoice&txn_no=101&user_id=1001" id="print_url">

Javascript 代码：

$(document).ready(function(){
$('.print_invoice').on('click', function () {  
var post_url = $("#print_url").val();
window.open(post_url, 'Transaction Invoice', 'width=640, resizable=yes, scrollbars=yes, toolbar=no, menubar=no, location=no, directories=no, status=true')
});
});

【讨论】：