程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> js-javascript onclick 無法觸發其引用的自定義函數

js-javascript onclick 無法觸發其引用的自定義函數

編輯：編程解疑

javascript onclick 無法觸發其引用的自定義函數

 <!DOCTYPE html>
<html>
<head>
<title>文章管理</title>
<link href="/blog/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #555;
    background-color: #f9f9f9;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333;
}

header {
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
    box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
}

.resume-navbar-brand {
    font-weight: 500;
    color: #cdddeb;
    background-color: #428bca;
}

.resume-navbar-brand:hover, .resume-navbar-brand:focus {
    color: #fff;
}

.resume-navbar-right li a {
    color: #cdddeb;
}

.resume-navbar-right li a:hover, .resume-navbar-right li a:focus {
    background-color: #cdddeb;
    color: #428bca;
}

.resume-button {
    background-color: #428bca;
    color: #cdddeb;
}

.resume-button:hover, .resume-button:focus {
    background-color: #f9f9f9;
    color: #555;
}

.resume-after-icon {
    margin-right: 5px;
}

.resume-techpercent {
    height: 30px;
}

.well {
    background-color: #cdddeb;
}

.resume-subtitle {
    background-color: #428bca;
    color: #cdddeb;
}

footer {
    padding: 16px 0;
    color: #cdddeb;
    text-align: center;
    background-color: #428bca;
    border-top: 1px solid #e5e5e5;
}

footer a {
    color: #cdddeb;
}
/*導航樣式控制*/
.navbar-default {
    background-color: #428bca;
    border-color: #cdddeb;
}

.navbar-default .navbar-brand {
    color: #cdddeb;
}

.navbar-default .navbar-nav>li>a {
    color: #cdddeb;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus
    {
    background-color: #cdddeb;
    color: #555;
}
/*右上側小button樣式控制*/
.navbar-default .navbar-toggle {
    background-color: #cdddeb;
}

.navbar-default .navbar-toggle:visited {
    background-color: #cdddeb;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus
    {
    background-color: #DFEAF8
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #428bca;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #cdddeb;
}

.navbar-default .navbar-toggle {
    border-color: #cdddeb;
}
</style>

<script type="text/javascript" src="/blog/script/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="/blog/script/bootstrap.min.js"></script>
<script>
function testButton(){
    alert("click");
}

function editArticle(articleId){
    window.location.href="/blog/article/editArticle.do?articleId="+articleId+"&randomCode="Math.random();
}

function deleteArticle(elem, articleId) {
    $.ajax({
        type:"POST",
        url:"/blog/article/deleteArticle.do",
        data:"articleId="+articleId,
        success:function(data){
            if(data==true){
                $(elem).parent().parent().remove();
                alert("文章刪除成功");
            }
        }
    })
}

$(function(){

    $("#articleCatalog_createArticle").click(function(){
        window.location.href = "/blog/article/addArticle.do";
    })


});



</script>

</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">切換英文</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="javascript:void(0)">測試1</a></li>
                    <li><a href="javascript:void(0)">測試2</a></li>
                    <li><a href="javascript:void(0)">測試3</a></li>
                </ul>
            </div>
        </div>
        <!--/.nav-collapse -->
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-7 col-sm-7">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="btn-group pull-right">
                        <button id="articleCatalog_createArticle" type="button" class="btn btn-success">新建</button>
                    </div>
                </nav>
                <button onclick="testButton()">test</button>
                <ul class="list-group">

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=3822ff5c60d1428eb01f0bc9166bed9b">y</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'3822ff5c60d1428eb01f0bc9166bed9b')">刪除</button>
                            </div></li>

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=42cd043b183c4454844544733ea23104">i</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'42cd043b183c4454844544733ea23104')">刪除</button>
                            </div></li>

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=5ad13b9e06fb459189142352d03f4f98">o</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'5ad13b9e06fb459189142352d03f4f98')">刪除</button>
                            </div></li>

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=60b719bdf82444ce873f13182445ad10">x</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'60b719bdf82444ce873f13182445ad10')">刪除</button>
                            </div></li>

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=6db4a5087a46425eb301522c6f76137c">w</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'6db4a5087a46425eb301522c6f76137c')">刪除</button>
                            </div></li>

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=74fa5fc2dfee4290986a3397a7f1d397">f</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'74fa5fc2dfee4290986a3397a7f1d397')">刪除</button>
                            </div></li>

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=85b0a832f3564ef388c817e509098578">l</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'85b0a832f3564ef388c817e509098578')">刪除</button>
                            </div></li>

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=8a9cb5a0196f4cc0a562067ceb80be4d">j</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'8a9cb5a0196f4cc0a562067ceb80be4d')">刪除</button>
                            </div></li>

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=92624b6422fa423490aa179e562f97a3">v</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'92624b6422fa423490aa179e562f97a3')">刪除</button>
                            </div></li>

                        <li class="list-group-item"><a href="/blog/article?action=showArticle&articleId=9789a998ff894e48a080b86965837d98">c</a>
                            <div class="pull-right">
                                <button onclick="testButton()">test</button>
                                <button onclick="alert('click');">編輯</button>
                                <button onclick="deleteArticle(this,'9789a998ff894e48a080b86965837d98')">刪除</button>
                            </div></li>


                </ul>

                <nav>
                    <ul class="pagination">
                        <li><a
                            href="/blog/article/showCatalogue.do?pageNum=1">首頁</a>
                        </li>
                        <li><a
                            href="/blog/article/showCatalogue.do?pageNum=1">上一頁</a>
                        </li>

                            <li><a
                                href="/blog/article/showCatalogue.do?pageNum=1">1</a>
                            </li>

                            <li><a
                                href="/blog/article/showCatalogue.do?pageNum=2">2</a>
                            </li>

                        <li><a
                            href="/blog/article/showCatalogue.do?pageNum=2">下一頁</a>
                        </li>
                        <li><a
                            href="/blog/article/showCatalogue.do?pageNum=2">末頁</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-lg-5 col-md-5 col-sm-5">
                <div class="well">


                </div>
            </div>
        </div>
    </div>
    <footer>

    </footer>

<script type="text/javascript">

</script>
</body>
</html>

此處onclick="testButton()"無法執行

最佳回答：

 function editArticle(articleId){
    window.location.href="/blog/article/editArticle.do?articleId="+articleId+"&randomCode="+Math.random();//注意+號連接
}