javascript - JavaScript - 値を返して渡す方法

Question

私はいくつかのデータを投稿する機能に取り組んでいます-画像トラフAPIのフラグ/ピンの位置。

ポジションの詳細を渡すのに問題があります。

function sendOnClick() {
    function get_posx() {
        var relx = $("#image_edit").click(function(e) {
            var relX = e.pageX - this.offsetLeft;
            return relX
        });
        return relx;
    }

    jQuery.post('{% url case_image_detail_api case.pk image.pk %}', {
        'id' : '{{image.id}}',
        'image_posx' : get_posx(),
        'image_posy' : get_posx(),
    });
};

エラー: NS_ERROR_XPC_BAD_CONVERT_JS: JavaScript 引数を変換できませんでした

Answer 1

jQueryオブジェクト（）であるget_posxreturns 。これはDOM要素を含んでいるためHTTP引数にシリアル化できず、XMLHTTPRequestはそれについて文句を言います。relx$("#image_edit").click(…);

ユーザーが画像をクリックしたときにリクエストを送信する場合は$.post、イベントハンドラー内に呼び出しを配置する必要があります。

$("#image_edit").click(function sendOnClick(e) {
    var relx = e.pageX - this.offsetLeft,
        rely = e.pageY - this.offsetTop;

    jQuery.post('{% url case_image_detail_api case.pk image.pk %}', {
        'id' : '{{image.id}}',
        'image_posx' : relx,
        'image_posy' : rely
    });
});

Answer 2

上記のコメントが言ったsendOnClickように、イベントハンドラーである必要があります：

function sendOnClick(e) {
    var relX = e.pageX - this.offsetLeft;
    var relY = e.pageY - this.offsetTop;

    jQuery.post('{% url case_image_detail_api case.pk image.pk %}', {
        'id' : '{{image.id}}',
        'image_posx' : relX,
        'image_posy' : relY
    });
};

$("#image_edit").click(sendOnClick);