1

重複の可能性：
JavaScriptがインラインイベントハンドラーで呼び出されていない

アクションを実行するためにAJAXを使用してjavascriptベースの好き/嫌いシステムを構築しようとしています。like関数とdislike関数には、「likeit」と「dislikeit」という名前が付けられています。

HTML：

<a class="btn" data-toggle="tooltip" title="I like this." id="like" onclick="likeit('abc123');"><i class="icon-thumbs-up"></i></a>
<a class="btn" data-toggle="tooltip" title="I didn't like this." id="dislike" onclick="dislikeit('abc123');"><i class="icon-thumbs-down"></i></a>

JS：

$(document).ready(function() {
    "use strict";
    (function likeit(id) {
        $.post("likeDislike.php", {likeID:id}, function(data) {
            alert(data);
            // Nothing to be displayed.
        });
    });
    (function dislikeit(id) {
    });
});

GoogleChromeのInspectElementで発生するエラーは次のとおりです。

Uncaught ReferenceError: likeit is not defined
Uncaught ReferenceError: dislikeit is not defined

しかし、それらはその場で定義されています。

4

2 に答える 2

8

あなたのonclick=".."もの（とにかく使用すべきではありません）は、グローバルスコープにのみアクセスできます。関数は、document.readyコールバック関数のスコープで定義されます。

適切な解決策は、インラインイベントの代わりにJavaScriptを使用してハンドラーを登録することです。

$(document).ready(function() {
    "use strict";

    function likeit(id) { ... }
    function dislikeit(id) { ... }

    var funcMap = {
        'like': likeit,
        'dislike': dislikeit
    };

    $('.btn').on('click', function(e) {
        e.preventDefault();
        var action = $(this).data('action');
        var id = $(this).data('id');
        var func = funcMap[action];
        if(func) {
            func.call(this, id);
        }
    })
});

HTMLにもいくつかの変更が必要です。

<a class="btn" data-toggle="tooltip" title="I like this." id="like" data-id="abc123" data-action="like"><i class="icon-thumbs-up"></i></a>
<a class="btn" data-toggle="tooltip" title="I didn't like this." id="dislike" data-id="abc123" data-action="dislike"><i class="icon-thumbs-down"></i></a>
于 2013-01-01T11:47:10.237 に答える
0

これを試して

//make sure jquery library loaded here

<a class="btn" data-toggle="tooltip" title="I like this." id="like" onclick="likeit('abc123');"><i class="icon-thumbs-up"></i></a>
<a class="btn" data-toggle="tooltip" title="I didn't like this." id="dislike" onclick="dislikeit('abc123');"><i class="icon-thumbs-down"></i></a>

<script type="text/javascript">
function likeit(id){
$.post("likeDislike.php", {likeID:id}, function(data) {
            alert(data);
            // Nothing to be displayed.
        });

}
function dislikeit(id) {
    }
</script>
于 2013-01-01T11:47:34.223 に答える