如何动态创建按钮并为html页面添加onclick事件

时间:2014-04-23 09:02:41

标签: javascript jquery html ajax

我在我的javascript代码中创建了一个按钮,点击此按钮后应该转到product.html

var outputb2 = "<p align=right>"+ "<input type=button value=productandservices onClick=window.location=product.html>" + "</input>" +"</p>";
    $('#product').append(outputb2);

其中product是product.html中的div id。但是当我点击这个按钮产品和服务时......我不会去这个product.html。我能做什么..?

7 个答案:

答案 0 :(得分:4)

我不知道您为什么要使用javascript,除非您使用click事件发送一些数据。有一个简单的HTML代码可以做你想要的。

<a href="product.html#product">product and services</a>

如果你必须使用java-script试试这个

onclick="javascript:location.href='product.html#product'" 

答案 1 :(得分:3)

var outputb2 = "<p align=right>";
outputb2 +=  "<input type='button' value='productandservices' onClick='window.location=product.html'>"
outputb2 += "</p>";

$('#product').append(outputb2);

答案 2 :(得分:3)

检查出来

<script>
var outputb2 = "<p align=right>"+ "<input type=button id='productandservices' value=productandservices >" + "</input>" +"</p>";//added id
    $('#product').append(outputb2);

    $(document).ready(function()
    {

        $(document).on("click","#productandservices",function()
        {
            alert('clcik');
            window.location='product.html';
        });

    });

</script>

将文件名用引号'

括起来
<script>
var outputb2 = "<p align=right>"+ "<input type=button id='productandservices' value=productandservices onClick=window.location='product.html' >" + "</input>" +"</p>";
    $('#product').append(outputb2);


</script>

答案 3 :(得分:3)

您的代码中可能需要一些转义字符,它可以正常工作

var outputb2 = "<p 'align=right'>"+ "<input type='button' value='productandservices' onClick='window.location=\"product.html?someParam=hi\"'>" + "</input>" +"</p>";
$('#product').append(outputb2);

答案 4 :(得分:2)

var outputb2 = "<p align='right'><input type='button' value='productandservices' onClick='window.location=product.html'></input></p>";
$('#product').append(outputb2);

答案 5 :(得分:2)

试试这个:

var outputb2 = "<p align='right'>"+ 
                 "<input type='button' value='productandservices 'onClick='window.location=\"product.html\"' />" + 
               "</p>";
$('#product').append(outputb2);

像这样添加'onClick='window.location=\"product.html\"'

Live demo

答案 6 :(得分:2)

使用正确的语法:

<input TYPE="button" value=productandservices onclick="window.location.href='http://www.wherever.com'"> 

另一种选择是在按钮中创建一个链接:

<button type="button"><a href="yourlink.com">Link link</a></button>

然后使用CSS来设置链接和按钮的样式,以便链接占据按钮内的整个空间(因此用户不会错过任何一次点击):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

但链接的目的是转到另一个页面。因此,尝试使按钮像链接一样是错误的解决方案。我的建议是你应该使用链接并将其设计为看起来像一个按钮。

<a href="/page2>Continue</a>