Question

我在我的代码中有一个位置，它将一堆其他div附加到一个父div。在每个div中都有一个图像（用作按钮），点击时需要调用两个函数。通常会这样做：

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

但是因为即时添加它们我在内联代码中执行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函数包装在＆＃39; ＆＃39;而不是＆＃34; ＆＃34;但由于某种原因，它不会让它读取这两个函数。知道怎么解决吗？

Answer 1

试试这个..

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

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

并在您的内联

中

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

或尝试逃避'

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

Answer 2

只需使用反斜杠转义字符串中的'和"个字符，分别生成\'和\"。您可能希望看到远离内联属性事件处理程序，但它们很难维护。

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标记中。

希望有所帮助！

内联onclick有两个函数调用

3 个答案: