日期:2014-05-16  浏览次数:20413 次

JQuery,JavaScript创建链接并模拟点击

用JQuery创建一个a标签,在设定a标签的属性后,再用JQuery模拟点击一下该链接。我写了一段代码但不知为何不能触发点击。代码如下:

?

<html>  
<head>  
<script type="text/javascript" src="jquery-1.7.js"></script>  
<script type="text/javascript">  
function clickMe() {  
    var $aa = $('<a></a>');  
    $aa.attr('href','www.sohu.com');  
    $aa.attr('target','_blank');  
    alert($aa.attr('href'));    //$aa.click();  
    $aa.trigger('click');  
}  
</script>  
</head>  
<body>  
<input type="button" id="btn" value="Click Btton" onclick="clickMe()"/>  
</body>  
</html> 

原来我以为可以直接 用click()函数,结果不行,然后我又改成了trigger()函数,还是不行。

?

有人提议改成javascript的click而不是JQuery的click,代码如下:

?

<html>  
<head>  
<script type="text/javascript" src="jquery-1.6.4.js"></script>  
<script type="text/javascript">  
function clickMe() {  
    var $aa = $('<a>');  
    $aa.html('sohu');  
    $('#btn').parent().append($aa);  
    $aa.attr('href','http://www.sohu.com');  
    $aa.attr('target','_blank');  
    $aa.get(0).click();  
}  
</script>  
</head>  
<body>  
<input type="button" id="btn" value="Click Btton" onclick="clickMe()"/>  
</body>  
</html>

这样做确实可以,但是有一个问题,在IE和FF下,这段代码好使;但是在chrome下,点击事件失效。

有人专门做了些实验,在“JavaScript模拟用户单击事件”做了说明。Chrome确实存在这个问题。

?

因此把代码改成如下:

?

<html>  
<head>  
<script type="text/javascript" src="jquery-1.6.4.js"></script>  
<script type="text/javascript">  
function clickMe() {  
    var $aa = $('<a>');  
    $aa.html('sohu');  
    $('#btn').parent().append($aa);  
    $aa.attr('href','http://www.sohu.com');  
    $aa.attr('target','_blank');  

    if($.browser.msie || $.browser.mozilla) {
        $aa.get(0).click();  
    }else {
    	window.open($aa.attr('href'), $aa.attr('target'));
    }
}  
</script>  
</head>  
<body>  
<input type="button" id="btn" value="Click Btton" onclick="clickMe()"/>  
</body>  
</html> 

虽然window.open()方法会可能被浏览器屏蔽,不过这是目前我找到的相对较好的做法。

?

?

?