Question

我有一个这样定义的函数：

function chat_add_user_message(message, url, option_position, vote_count) {
    var html = '<div">' +
        '<p class="message" onclick="cast_vote()">' +
            message +
        '</p>' +
    '</div>';
    $(".chatlogs").append(html);
};

现在，我想做的就是每当单击消息时调用函数cast_vote。我也想将参数传递给该函数。

我尝试在上面的示例代码中调用不带参数的cast_vote函数。尽管我将函数定义如下：

function cast_vote() {
    console.log("Cast Vote");
};

我遇到一个错误：

未捕获的ReferenceError：未定义cast_vote
在HTMLParagraphElement.onclick

如何使用cast_vote中的参数调用var html函数？

Answer 1

诸如cast_vote之类的声音不在顶层。内联处理程序引用的函数必须在顶层定义，才能被引用。例如，以下操作将无效：

$(() => {
  function doStuff() {
    console.log('doing stuff');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onclick="doStuff()">click me</div>

您必须将功能移到顶层，以便使其处于全局范围内：

function doStuff() {
  console.log('doing stuff');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onclick="doStuff()">click me</div>

因此，您可以将cast_vote函数移到顶层。但是，最好完全避免使用内联处理程序。这是非常糟糕的做法，并且会使代码更难管理。而是使用Javascript正确附加侦听器。使用jQuery，您可以将函数传递给.click：

function chat_add_user_message(message, url, option_position, vote_count) {
    var $newDiv = $(
    '<div>' +
        '<p class="message">' +
            message +
        '</p>' +
    '</div>'
    );
    $newDiv.find('p').click(cast_vote);
    $(".chatlogs").append(newDiv);
}

要将其他参数传递给cast_vote，您可以改为将本身调用 cast_vote的函数传递给click：

$newDiv.find('p').click(() => cast_vote('arg1', 'arg2'));

Answer 2

在您的聊天记录类中，有这个

<div id="foo" style="display:none">
    <p class="message" onclick="cast_vote()"></p>'
</div>

在js中将url，option_position，vote_count作为全局变量，因此您无需将它们作为参数传递。

function chat_add_user_message(message, url, option_position, vote_count) {
    $(".message").text(message);
    $("#foo").css({"display": "block"});
    $(this).url = url;
    $(this).option_position = option_position;
    $(this).vote_count = vote_count;
}

Answer 3

您可以通过Javascript定义click事件处理程序。

function chat_add_user_message(message, url, option_position, vote_count) {
    var div = $("<div>"); //Create <div> element
    var p = $("<p>"); //Create <p> element
    $(p).addClass("message") //Add message css class
        .text(message) //set the text inside the <p> element
        .appendTo(div); //append <p> to <div>

    //Define click event handler
    $(p).click(function(){
        cast_vote(message, url, option_position, vote_count);
    });

    //Append <div> to .chatlogs
    $(".chatlogs").append(div);
};

function cast_vote(message, url, option_position, vote_count) {
    console.log(message, url, option_position, vote_count);
};

chat_add_user_message("Hello World", "http://www.example.com", 0, 0);
chat_add_user_message("Hello World 2", "http://www.example.com", 1, 1);

如何使用来自html字符串的参数调用函数，该html字符串在另一个函数中定义为变量？

3 个答案: