具有两个函数调用的内联点击

Question

我的代码中有一个地方，可以将一堆其他div附加到一个父div。 在这些div中的每一个中都有一个图像（用作按钮），单击时需要调用两个函数。 这通常会完成：

 onclick = "alert('hi'); addfriend(username);";

但是由于 im 附加了它们，我在 im 附加的内联代码中执行 onclick 函数，请参见此处：

.append("<div class = 'scrollable'; style = 'width:100%; height: 30%; text-align: left; background-color: white; border: 1px solid gray; line-height: 0%' >" +
     "<div style = 'float: left; margin-left: 5%'><p style = ' font-size:" +fontSize+"'>" + username + "</p><p style = 'color: gray; font-size:" +subtext+"'>" +wholeName+"</p></div>    **<img style = 'float: right; padding-top: 3%; padding-right: 3%; right: 0; height: 80%;' onclick = 'addFriend('"+username+"'); alert('hi')'  src = 'addfriend.png'>**</div>");

我知道它看起来一团糟，你不应该使用内联，但如果可能的话，这就是我想做的。

无论如何，由于它是内联的，我试图将两个onclick函数包装在" '而不是" "中，但由于某种原因，这不允许它读取这两个函数。知道如何解决吗？

Answer 1

只需用反斜杠转义字符串中的'和"字符，分别产生'和"。不过，您可能希望远离内联属性事件处理程序，因为它们很难维护。

Answer 2

试试这个。

创建一个接受 2 个参数的函数，并将这 2 个函数放在其中

function dummy(uname,toalert){
  addFriend(uname);
  alert(toalert);
}

并在您的内联中

onclick = 'dummy('"+username+"','hi')'

或试图逃跑"

 onclick = 'addFriend('"+username+"'); alert('hi')'

Answer 3

由于您似乎已经在使用 jQuery（基于您的 .append（） 代码段），您可能需要考虑将该函数从内联代码中抽象出来。因此，您最终可能会得到以下内容：

$('img').click( function() 
{
    //Not sure where you're getting the username from. $(this).parent()... for all we know?
    var username = $('whatever').val(); 
    addFriend(username);
    alert(username);
}

这样，您就不必将代码添加到每个 img 标签中。

希望对您有所帮助！